From 26a5bc3d67f6c4a78526bb436f5aa4f24be5696e Mon Sep 17 00:00:00 2001
From: likunming <likunming@163.com>
Date: Wed, 27 Nov 2024 17:13:47 +0800
Subject: [PATCH] =?UTF-8?q?*=20=E7=BB=84=E4=BB=B6=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E3=80=82=20*=20=E5=AE=8C=E5=96=84=E6=A0=91?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=8B=96=E6=8B=BD=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E8=BF=87=E7=A8=8B=E4=B8=AD=E5=81=9C=E7=95=99?=
 =?UTF-8?q?=E5=9C=A8=E7=9B=AE=E6=A0=87=E8=8A=82=E7=82=B91.5=E7=A7=92?=
 =?UTF-8?q?=E5=B0=86=E5=85=B6=E5=B1=95=E5=BC=80=EF=BC=9B=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=B0=86=E6=95=B0=E6=8D=AE=E6=8B=96=E5=85=A5=E8=87=B3=E6=97=A0?=
 =?UTF-8?q?=E5=AD=A9=E5=AD=90=E8=8A=82=E7=82=B9=E7=9A=84=E7=9B=AE=E6=A0=87?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E4=B8=AD=E3=80=82=20*=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=A0=91=E8=A1=A8=E6=A0=BC=E6=87=92=E5=8A=A0=E8=BD=BD=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E3=80=82=20*=20=E6=96=B0=E5=A2=9E=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E5=88=86=E7=BB=84=E5=AD=97=E6=AE=B5=E6=8F=90?=
 =?UTF-8?q?=E5=8F=96=E7=8B=AC=E7=AB=8B=E8=A1=8C=E6=88=96=E5=90=88=E5=B9=B6?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E3=80=82=20*=20=E6=96=B0=E5=A2=9E=E9=AB=98?=
 =?UTF-8?q?=E7=BA=A7=E6=9F=A5=E8=AF=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E7=94=A8=E6=88=B7=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84?=
 =?UTF-8?q?=E8=A3=85=E6=9F=A5=E8=AF=A2=E6=9D=A1=E4=BB=B6=E3=80=82=20*=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=87=AA=E5=AE=9A=E4=B9=89=E8=BF=BD=E5=8A=A0?=
 =?UTF-8?q?=E8=A1=8C=E5=8A=9F=E8=83=BD=E3=80=82=20*=20=E5=86=85=E7=BD=AE?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=96=B0=E5=A2=9E`fullScreen`=EF=BC=8C?=
 =?UTF-8?q?=E8=AF=A5=E6=8C=89=E9=92=AE=E4=B8=BA=E5=85=A8=E5=B1=8F=E4=B8=8E?=
 =?UTF-8?q?=E9=80=80=E5=87=BA=E5=8A=A8=E6=80=81=E5=8F=98=E5=8C=96=E3=80=82?=
 =?UTF-8?q?=20*=20=E7=94=A8=E6=88=B7=E9=85=8D=E7=BD=AE=E4=B8=AD=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=88=86=E7=BB=84=E3=80=81=E5=88=86=E5=89=B2=E7=BA=BF?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD=E3=80=82=20*=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96Form=E8=A1=A8=E5=8D=95=E9=AA=8C=E8=AF=81=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=EF=BC=8C=E5=85=88=E7=9C=8B=E6=98=AF=E5=90=A6=E6=9C=89?=
 =?UTF-8?q?errorMessageI18nKey=EF=BC=8C=E6=9C=89=E7=9A=84=E6=83=85?=
 =?UTF-8?q?=E5=86=B5=E4=B8=8B=E4=BC=98=E5=85=88=E4=BD=BF=E7=94=A8=E3=80=82?=
 =?UTF-8?q?=20*=20=E4=BF=AE=E5=A4=8D=E5=85=A8=E5=B1=8F=E6=97=B6=E7=B4=A7?=
 =?UTF-8?q?=E5=87=91=E5=A4=B1=E6=95=88=E4=B8=8E=E5=BA=95=E9=83=A8=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=86=E4=B8=8D=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98=E3=80=82?=
 =?UTF-8?q?=20*=20=E4=BF=AE=E5=A4=8D=E5=86=85=E7=BD=AE=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3=E4=B8=AD=E7=9A=84=E6=8C=89=E9=92=AE=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4=E6=8A=A5=E9=94=99=E5=90=8E=E5=85=B3=E9=97=AD=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3=E9=87=8D=E6=96=B0=E6=89=93=E5=BC=80=E4=BB=8D=E7=84=B6?=
 =?UTF-8?q?=E5=A4=84=E4=BA=8Eloading=E7=8A=B6=E6=80=81=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E3=80=82=20*=20beforeRemove=E4=B8=8EbeforeRequestData?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=A2=9E=E5=8A=A0=E5=90=8C=E6=AD=A5=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=EF=BC=8C=E4=BA=8B=E4=BB=B6=E6=96=B9=E6=B3=95=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E5=AE=8C=E6=88=90=E5=90=8E=E5=86=8D=E6=89=A7=E8=A1=8C?=
 =?UTF-8?q?=E5=86=85=E9=83=A8=E5=A4=84=E7=90=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 io.sc.platform.core.frontend/package.json     |    3 +-
 .../src/platform/components/form/WForm.vue    |    5 +-
 .../src/platform/components/grid/Body.vue     |   32 +
 .../platform/components/grid/CellEditor.vue   |  134 --
 .../components/grid/GridAppendRow.vue         |   27 -
 .../src/platform/components/grid/GridBody.vue |  376 ----
 .../platform/components/grid/GridConfig.vue   |  363 ----
 .../components/grid/GridEditToolbar.vue       |  359 ----
 .../platform/components/grid/GridEditor.vue   |  232 ---
 .../components/grid/GridPagination.vue        |   73 -
 .../src/platform/components/grid/GridTd.vue   |  210 --
 .../src/platform/components/grid/GridTop.vue  |  786 -------
 .../src/platform/components/grid/GridView.vue |  100 -
 .../grid/{GridHeader.vue => Header.vue}       |  171 +-
 .../platform/components/grid/Pagination.vue   |   41 +
 .../src/platform/components/grid/Td.vue       |  200 ++
 .../{GridAppendContent.vue => TdContent.vue}  |    2 +-
 .../src/platform/components/grid/Top.vue      |  287 +++
 .../src/platform/components/grid/Tr.vue       |  117 ++
 .../grid/TreeGridFirstTdContent.vue           |  269 +++
 .../platform/components/grid/TreeGridRow.vue  |  907 --------
 .../src/platform/components/grid/WGrid.vue    | 1849 +----------------
 .../components/grid/css/separator.css         |    7 +
 .../platform/components/grid/extra/Editor.vue |  216 ++
 .../components/grid/extra/ViewPanel.vue       |   71 +
 .../extra/advanced-query/AdvancedQuery.vue    |   58 +
 .../grid/extra/append/AppendContent.vue       |   21 +
 .../grid/extra/append/AppendRow.vue           |   39 +
 .../grid/extra/config/AloneGroup.vue          |   54 +
 .../grid/extra/config/CheckboxSelection.vue   |   36 +
 .../grid/extra/config/ConfigPanel.vue         |   60 +
 .../components/grid/extra/config/Dense.vue    |   57 +
 .../grid/extra/config/DisplayColumn.vue       |   47 +
 .../grid/extra/config/Fullscreen.vue          |   35 +
 .../grid/extra/config/Separator.vue           |   96 +
 .../components/grid/extra/config/SortNo.vue   |   36 +
 .../grid/extra/config/StickyColumn.vue        |   44 +
 .../components/grid/extra/group/GroupTr.vue   |   54 +
 .../grid/extra/inline-edit/CellEditor.vue     |   97 +
 .../extra/inline-edit/InlineEditComponent.vue |   71 +
 .../extra/inline-edit/InlineEditToolbar.vue   |  249 +++
 .../src/platform/components/grid/ts/Base.ts   |   48 +
 .../platform/components/grid/ts/GridTools.ts  |  328 +++
 .../src/platform/components/grid/ts/Init.ts   |  226 ++
 .../grid/ts/computed/ComputedManager.ts       |  252 +++
 .../components/grid/ts/constant/Constant.ts   |   58 +
 .../grid/ts/constant/src/CriteriaOperator.ts  |   85 +
 .../grid/ts/constant/src/DndMode.ts           |   24 +
 .../grid/ts/constant/src/EditStatus.ts        |   34 +
 .../grid/ts/constant/src/FieldNames.ts        |   63 +
 .../grid/ts/constant/src/FormStatus.ts        |   39 +
 .../grid/ts/constant/src/GroupMode.ts         |   24 +
 .../grid/ts/constant/src/GroupStartOpen.ts    |   29 +
 .../grid/ts/constant/src/SelectMode.ts        |   34 +
 .../components/grid/ts/event/EventManager.ts  |  175 ++
 .../grid/ts/event/src/AfterDragAndDrop.ts     |   18 +
 .../ts/event/src/AfterEditorDataSubmit.ts     |   18 +
 .../grid/ts/event/src/AfterEditorOpen.ts      |   18 +
 .../grid/ts/event/src/AfterRemove.ts          |   18 +
 .../grid/ts/event/src/AfterRequestData.ts     |   18 +
 .../ts/event/src/BeforeEditorDataSubmit.ts    |   35 +
 .../grid/ts/event/src/BeforeRemove.ts         |   33 +
 .../grid/ts/event/src/BeforeRequestData.ts    |   25 +
 .../components/grid/ts/event/src/RowClick.ts  |   61 +
 .../grid/ts/event/src/RowDbClick.ts           |   27 +
 .../grid/ts/event/src/UpdateTicked.ts         |   33 +
 .../grid/ts/event/src/UpdateTickeds.ts        |   38 +
 .../grid/ts/expose-api/ExposeApiManager.ts    |  134 ++
 .../grid/ts/expose-api/src/Button.ts          |  133 ++
 .../grid/ts/expose-api/src/ComponentRef.ts    |   40 +
 .../grid/ts/expose-api/src/GetData.ts         |  182 ++
 .../grid/ts/expose-api/src/LocalMode.ts       |  209 ++
 .../grid/ts/expose-api/src/Operator.ts        |  183 ++
 .../grid/ts/expose-api/src/ResetProperty.ts   |  118 ++
 .../components/grid/ts/function/Criteria.ts   |  158 ++
 .../grid/ts/function/DragAndDrop.ts           |  411 ++++
 .../components/grid/ts/function/InlineEdit.ts |  112 +
 .../components/grid/ts/function/Operator.ts   |  272 +++
 .../components/grid/ts/function/RequestApi.ts |  339 +++
 .../components/grid/ts/function/RowData.ts    |  440 ++++
 .../src/platform/components/grid/ts/grid.ts   |  105 -
 .../src/platform/components/grid/ts/index.ts  |   14 +
 .../components/grid/ts/toolbar/Button.ts      |   55 +
 .../grid/ts/toolbar/ButtonManager.ts          |  227 ++
 .../components/grid/ts/toolbar/buttons/Add.ts |   30 +
 .../grid/ts/toolbar/buttons/AddChild.ts       |   36 +
 .../grid/ts/toolbar/buttons/AddTop.ts         |   30 +
 .../grid/ts/toolbar/buttons/AdvancedQuery.ts  |   34 +
 .../grid/ts/toolbar/buttons/CellEdit.ts       |   45 +
 .../grid/ts/toolbar/buttons/Clone.ts          |   41 +
 .../grid/ts/toolbar/buttons/Edit.ts           |   40 +
 .../grid/ts/toolbar/buttons/Expand.ts         |   42 +
 .../grid/ts/toolbar/buttons/Export.ts         |   89 +
 .../grid/ts/toolbar/buttons/FullScreen.ts     |   30 +
 .../grid/ts/toolbar/buttons/InlineCellEdit.ts |   44 +
 .../grid/ts/toolbar/buttons/InlineRowEdit.ts  |   37 +
 .../grid/ts/toolbar/buttons/InlineRowsEdit.ts |   35 +
 .../grid/ts/toolbar/buttons/MoreQuery.ts      |   35 +
 .../grid/ts/toolbar/buttons/Query.ts          |   27 +
 .../grid/ts/toolbar/buttons/Refresh.ts        |   27 +
 .../grid/ts/toolbar/buttons/Remove.ts         |   80 +
 .../grid/ts/toolbar/buttons/Reset.ts          |   27 +
 .../ts/toolbar/buttons/ResetDefaultValues.ts  |   53 +
 .../grid/ts/toolbar/buttons/Separator.ts      |   15 +
 .../grid/ts/toolbar/buttons/View.ts           |   33 +
 .../components/grid/ts/types/CriteriaType.ts  |    5 +
 .../components/grid/ts/types/EventType.ts     |   26 +
 .../components/grid/ts/types/PropsType.ts     |  246 +++
 .../components/grid/ts/types/TableType.ts     |   60 +
 .../grid/ts/types/table/CellSelectType.ts     |   26 +
 .../grid/ts/types/table/ColorType.ts          |   18 +
 .../grid/ts/types/table/ComponentRefType.ts   |    9 +
 .../ts/types/table/ConfigPanelStoreType.ts    |   57 +
 .../grid/ts/types/table/GridLocationType.ts   |   53 +
 .../ts/types/table/PaginationConfigType.ts    |   26 +
 .../grid/ts/types/table/PaginationType.ts     |   39 +
 .../grid/ts/types/table/StoreType.ts          |   77 +
 .../components/grid/ts/types/table/UrlType.ts |    7 +
 .../components/toolbar/ChildrenBtn.vue        |    6 +-
 .../platform/components/toolbar/WToolbar.vue  |   82 +-
 .../src/platform/i18n/messages.json           |    1 +
 .../src/platform/i18n/messages_tw_CN.json     |    1 +
 .../src/platform/i18n/messages_zh_CN.json     |    1 +
 123 files changed, 8744 insertions(+), 5610 deletions(-)
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/Body.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/CellEditor.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/GridAppendRow.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/GridConfig.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/GridEditToolbar.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/GridEditor.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/GridPagination.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/GridTd.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/GridTop.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/GridView.vue
 rename io.sc.platform.core.frontend/src/platform/components/grid/{GridHeader.vue => Header.vue} (75%)
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/Pagination.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/Td.vue
 rename io.sc.platform.core.frontend/src/platform/components/grid/{GridAppendContent.vue => TdContent.vue} (84%)
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/Top.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/Tr.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/TreeGridFirstTdContent.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/Editor.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/ViewPanel.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/advanced-query/AdvancedQuery.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/append/AppendContent.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/append/AppendRow.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/config/AloneGroup.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/config/CheckboxSelection.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/config/ConfigPanel.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Dense.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/config/DisplayColumn.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Fullscreen.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Separator.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/config/SortNo.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/config/StickyColumn.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/group/GroupTr.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/CellEditor.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditComponent.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditToolbar.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/Base.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/GridTools.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/Init.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/computed/ComputedManager.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/Constant.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/CriteriaOperator.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/DndMode.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/EditStatus.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/FieldNames.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/FormStatus.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/GroupMode.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/GroupStartOpen.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/SelectMode.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/EventManager.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterDragAndDrop.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterEditorDataSubmit.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterEditorOpen.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterRemove.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterRequestData.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeEditorDataSubmit.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeRemove.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeRequestData.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowClick.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowDbClick.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/UpdateTicked.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/UpdateTickeds.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/ExposeApiManager.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/Button.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/ComponentRef.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/GetData.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/LocalMode.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/Operator.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/ResetProperty.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Criteria.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/function/DragAndDrop.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/function/InlineEdit.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Operator.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RequestApi.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RowData.ts
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/grid.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/index.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/Button.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/ButtonManager.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Add.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AddChild.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AddTop.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AdvancedQuery.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/CellEdit.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Clone.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Edit.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Expand.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Export.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/FullScreen.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineCellEdit.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowEdit.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowsEdit.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/MoreQuery.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Query.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Refresh.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Remove.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Reset.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/ResetDefaultValues.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Separator.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/View.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/CriteriaType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/EventType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/PropsType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/TableType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/CellSelectType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ColorType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ComponentRefType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ConfigPanelStoreType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/GridLocationType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/PaginationConfigType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/PaginationType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/StoreType.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/UrlType.ts

diff --git a/io.sc.platform.core.frontend/package.json b/io.sc.platform.core.frontend/package.json
index 9376956f..fcba0c84 100644
--- a/io.sc.platform.core.frontend/package.json
+++ b/io.sc.platform.core.frontend/package.json
@@ -144,6 +144,7 @@
     "vue-i18n": "10.0.3",
     "vue-router": "4.4.5",
     "xml-formatter": "3.6.3",
-    "node-sql-parser": "5.3.2"
+    "node-sql-parser": "5.3.2",
+    "sort-array": "5.0.0"
   }
 }
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue b/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
index e8ae7d2f..86260aff 100644
--- a/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
@@ -33,7 +33,7 @@
 <script setup lang="ts">
 import { ref, reactive, watch, computed, toRaw, useAttrs, getCurrentInstance } from 'vue';
 import { useQuasar } from 'quasar';
-import { VueTools, Tools } from '@/platform';
+import { VueTools, Tools, $t } from '@/platform';
 import { PageStatusEnum } from '@/platform/components/utils';
 import { getDefaultValue } from './FormField.ts';
 
@@ -318,6 +318,9 @@ const setValidationErrors = (errors: errorType[]) => {
         formFields[name].error = true;
         formFields[name].errorMessage = grouped[name]
           .map((obj) => {
+            if (!Tools.isEmpty(obj['errorMessageI18nKey'])) {
+              return $t(obj['errorMessageI18nKey']);
+            }
             return obj.errorMessage;
           })
           .join('、');
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/Body.vue b/io.sc.platform.core.frontend/src/platform/components/grid/Body.vue
new file mode 100644
index 00000000..79312d64
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/Body.vue
@@ -0,0 +1,32 @@
+<template>
+  <!-- 单独分组行 -->
+  <GroupTr v-if="useGroupTrComputed" :scope="props.scope"></GroupTr>
+
+  <!-- 普通行 -->
+  <Tr v-else :scope="props.scope"></Tr>
+
+  <!-- 追加行 -->
+  <GridAppendRow :scope="props.scope"></GridAppendRow>
+</template>
+<script setup lang="ts">
+import { inject, computed } from 'vue';
+import { Constant, GridTools } from './ts/index';
+import Tr from './Tr.vue';
+import GroupTr from './extra/group/GroupTr.vue';
+import GridAppendRow from './extra/append/AppendRow.vue';
+
+const tools = <GridTools>inject('tools');
+const props = defineProps({
+  scope: {
+    // 顶部插槽属性
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+const useGroupTrComputed = computed(() => {
+  return tools.props.groupMode === Constant.GROUP_MODE.ALONE && !tools.props.tree && tools.table.configStore.aloneGroupByField;
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/CellEditor.vue b/io.sc.platform.core.frontend/src/platform/components/grid/CellEditor.vue
deleted file mode 100644
index 2dbcad25..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/CellEditor.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-  <w-dialog ref="dialogRef" :title="dialog.title" v-bind="props.grid.props.editor?.cellEditor" :buttons="dialog.buttons">
-    <w-form ref="dialogFormRef" :cols-num="1" :fields="fieldsComputed" class="pt-1.5 px-1.5"></w-form>
-  </w-dialog>
-</template>
-<script setup lang="ts">
-import { ref, reactive, inject, computed, toRaw } from 'vue';
-import { t, Tools, noErrorAxios, NotifyManager, ServerExceptionHandler } from '@/platform';
-
-const dialogRef = ref();
-const dialogFormRef = ref();
-
-const props = defineProps({
-  grid: {
-    // 表格实例
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  url: {
-    // 表格所有的url
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  getRow: {
-    type: Function,
-    default: () => {},
-  },
-  componentInfo: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  rowKeyName: {
-    type: String,
-    default: '',
-  },
-});
-const table = inject('table');
-
-const dialog = {
-  title: t('action.edit'),
-  buttons: [
-    {
-      icon: 'beenhere',
-      labelI18nKey: props.grid.props.localMode ? 'confirm' : 'action.submit',
-      label: t(props.grid.props.localMode ? 'confirm' : 'action.submit'),
-      loading: false,
-      click: async () => {
-        dialog.buttons[0].loading = true;
-        const result = await dialogFormRef.value.validate();
-        if (result) {
-          const cellSelected = table['cellSelected'];
-          const data = dialogFormRef.value.getData();
-          const row = props.getRow(table.rows, cellSelected['row'][props.rowKeyName], false);
-          if (row) {
-            row[cellSelected['colName']] = data[cellSelected['colName']];
-            // 判定是否需要往后端发送修改操作
-            if (!props.grid.props.localMode) {
-              const requestParams = {
-                method: 'PUT',
-                headers: { 'content-type': 'application/json;charset=utf-8;' },
-                data: toRaw(row),
-                url: getUrl(row[props.grid.props.primaryKey]),
-              };
-              noErrorAxios(requestParams)
-                .then((resp) => {
-                  dialog.buttons[0].loading = false;
-                  props.grid.emit('afterEditorDataSubmit', { grid: props.grid, data: resp.data });
-                  NotifyManager.info(t('tip.operationSuccess'));
-                  dialogRef.value.hide();
-                })
-                .catch((error) => {
-                  if (error?.code === 1001) {
-                    // 验证错误
-                    dialogFormRef.value.setValidationErrors(error.data);
-                  } else {
-                    ServerExceptionHandler.handle(error);
-                  }
-                  dialog.buttons[0].loading = false;
-                });
-            } else {
-              dialogRef.value.hide();
-            }
-          }
-        }
-        dialog.buttons[0].loading = false;
-      },
-    },
-  ],
-};
-
-const fieldsComputed = computed(() => {
-  const fields = <any>[];
-  const cellSelected = table['cellSelected'];
-  if (Object.keys(cellSelected).length > 0) {
-    const column = table['columns'].find((item) => item['name'] === cellSelected['colName']);
-    if (column) {
-      fields.push({
-        name: column['name'],
-        type: column['type'],
-        label: column['label'],
-        defaultValue: cellSelected['value'],
-        ...column['attrs'],
-      });
-    }
-  }
-  return fields;
-});
-
-const getUrl = (primaryKey) => {
-  if (!Tools.isEmpty(props.url.editDataUrl)) {
-    return props.url.editDataUrl + '/' + primaryKey;
-  } else {
-    return props.url.dataUrl + '/' + primaryKey;
-  }
-};
-
-const getDialog = () => {
-  return dialogRef.value;
-};
-const getForm = () => {
-  return dialogFormRef.value;
-};
-
-defineExpose({
-  getDialog,
-  getForm,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridAppendRow.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridAppendRow.vue
deleted file mode 100644
index 6141564f..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridAppendRow.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <q-tr v-for="(appendRow, rowIndex) in props.grid.props.appendRows" :key="rowIndex" :no-hover="true" :class="''">
-    <q-td v-for="(col, colIndex) in appendRow" :key="colIndex" :rowspan="col['rowSpan'] ? col['rowSpan'] : 1" :colspan="col['colSpan'] ? col['colSpan'] : 1">
-      <template v-if="typeof col['value'] === 'function'">
-        <GridAppendContent :value="col.value({ grid: props.grid, rows: props.grid.getRows() })"></GridAppendContent>
-      </template>
-      <template v-else>
-        <span v-dompurify-html="!Tools.isEmpty(col['value']) ? col['value'] : ''"></span>
-      </template>
-    </q-td>
-  </q-tr>
-</template>
-
-<script setup lang="ts">
-import { Tools } from '@/platform';
-import GridAppendContent from './GridAppendContent.vue';
-
-const props = defineProps({
-  grid: {
-    // 表格实例
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue
deleted file mode 100644
index 4740d248..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue
+++ /dev/null
@@ -1,376 +0,0 @@
-<template>
-  <template v-if="props.grid.props.tree">
-    <TreeGridRow
-      :ref="(el) => setTreeRowComponentRef(el, scope.row)"
-      :grid="props.grid"
-      :columns-map="props.tableColumnsMap"
-      :row="props.scope.row"
-      :cols="props.scope.cols"
-      :row-key="props.rowKeyName"
-      :grid-row-click="props.rowClick"
-      :grid-row-db-click="props.rowDbClick"
-      :after-drag-and-drop="props.afterDragAndDrop"
-      :get-row="props.getRow"
-      :url="props.url"
-      :get-row-component-refs="getRowComponentRefs"
-      :set-old-value="setOldValue"
-      :no-data-tr-colspan="noDataTrColspan"
-      :updates="updates"
-      :row-index="scope.rowIndex"
-    ></TreeGridRow>
-  </template>
-  <template v-else>
-    <q-tr
-      ref="trRef"
-      :no-hover="props.grid.props.selectMode === selectMode.row ? false : true"
-      :class="props.scope.row[table.selectedField] && props.grid.props.selectMode === selectMode.row ? 'selected' : ''"
-      :props="props.scope"
-      :draggable="draggableComputed"
-      @click.stop="props.rowClick($event, scope.row, scope.rowIndex)"
-      @dblclick.stop="props.rowDbClick($event, scope.row, scope.rowIndex)"
-      @dragleave="draggableComputed ? onDragLeave($event) : () => {}"
-      @dragover="draggableComputed ? onDragOver($event, scope) : () => {}"
-      @drop="draggableComputed ? onDrop($event, scope) : () => {}"
-      @dragstart="draggableComputed ? onDragStart($event, scope) : () => {}"
-    >
-      <q-td v-if="table.checkboxSelection && props.grid.props.selectMode !== selectMode.none" class="text-center" style="padding: 0; width: 50px">
-        <q-checkbox
-          v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)[table.tickedField]"
-          flat
-          :dense="props.denseBody"
-          @update:model-value="updateTicked($event, scope.row)"
-        />
-      </q-td>
-      <template v-for="(col, index) in scope.cols" :key="index">
-        <GridTd
-          :ref="(el) => setComponentRef(el, scope.row, col)"
-          :grid="props.grid"
-          :get-row="props.getRow"
-          :row-key-name="props.rowKeyName"
-          :scope="scope"
-          :col="col"
-          :value="col.value"
-          :is-selected-row="isSelectedRowComputed"
-        ></GridTd>
-      </template>
-    </q-tr>
-    <GridEditToolbar
-      :grid="props.grid"
-      :url="props.url"
-      :row="props.scope.row"
-      :row-key-name="props.rowKeyName"
-      :get-row="props.getRow"
-      :get-row-component-refs="getRowComponentRefs"
-      :set-old-value="setOldValue"
-      :no-data-tr-colspan="noDataTrColspan"
-    ></GridEditToolbar>
-    <GridAppendRow v-if="showAppendRowsComputed" :grid="props.grid"></GridAppendRow>
-  </template>
-</template>
-<script setup lang="ts">
-import { computed, inject, ref, toRaw } from 'vue';
-import { Tools, noErrorAxios, NotifyManager, t, ServerExceptionHandler } from '@/platform';
-import { dndMode, dndImage, selectMode, editStatus } from './ts/grid';
-import TreeGridRow from './TreeGridRow.vue';
-import GridTd from './GridTd.vue';
-import GridEditToolbar from './GridEditToolbar.vue';
-import GridAppendRow from './GridAppendRow.vue';
-
-const trRef = ref();
-const props = defineProps({
-  grid: {
-    // 表格实例
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  url: {
-    // 表格所有的url
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  scope: {
-    // 顶部插槽属性
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  tableColumnsMap: {
-    type: Map,
-    default: () => {
-      return new Map();
-    },
-  },
-  rowKeyName: {
-    type: String,
-    default: '',
-  },
-  rowClick: {
-    type: Function,
-    default: () => {},
-  },
-  rowDbClick: {
-    type: Function,
-    default: () => {},
-  },
-  afterDragAndDrop: {
-    type: Function,
-    default: () => {},
-  },
-  denseBody: {
-    type: Boolean,
-    default: () => {
-      return false;
-    },
-  },
-  getRow: {
-    type: Function,
-    default: () => {},
-  },
-  setOldValue: {
-    type: Function,
-    default: () => {},
-  },
-  noDataTrColspan: {
-    type: Number,
-    default: () => {
-      return 0;
-    },
-  },
-  allTickedStatus: {
-    type: Function,
-    default: () => {},
-  },
-});
-const table = inject('table');
-
-const componentRef = ref({});
-const getRowComponentRefs = (rowKey: string | Array<string>) => {
-  const refs = <any>[];
-  if (!Tools.isEmpty(componentRef.value)) {
-    const filterResult = Object.keys(componentRef.value).filter((item) => {
-      if (typeof rowKey === 'string') {
-        return item.startsWith(rowKey + '_');
-      } else {
-        return true;
-      }
-    });
-    if (filterResult.length > 0) {
-      filterResult.forEach((key) => {
-        refs.push(componentRef.value[key]);
-      });
-    }
-  }
-  return refs;
-};
-
-const setComponentRef = (el, row, col) => {
-  if (el && !Tools.isEmpty(col.type)) {
-    componentRef.value[row[props.rowKeyName] + '_' + col.name] = el;
-  }
-};
-
-const setTreeRowComponentRef = (el, row) => {
-  if (el && !Tools.isEmpty(row)) {
-    componentRef.value[row[props.rowKeyName] + '_'] = el;
-  }
-};
-
-const checkLastRow = (row) => {
-  if (props.grid.props.tree && row['expand'] && !Tools.isEmpty(row.children) && row.children.length > 0) {
-    const childrenLastRow = row.children[row.children.length - 1];
-    if (childrenLastRow['expand'] && !Tools.isEmpty(childrenLastRow.children) && childrenLastRow.children.length > 0) {
-      return checkLastRow(childrenLastRow);
-    } else {
-      return childrenLastRow[props.rowKeyName] === props.scope.row[props.rowKeyName];
-    }
-  } else {
-    return row[props.rowKeyName] === props.scope.row[props.rowKeyName];
-  }
-};
-
-const showAppendRowsComputed = computed(() => {
-  if (Array.isArray(props.grid.props.appendRows) && props.grid.props.appendRows.length > 0) {
-    const lastRow = table.rows[table.rows.length - 1];
-    return checkLastRow(lastRow);
-  }
-  return false;
-});
-
-const draggableComputed = computed(() => {
-  if (
-    props.grid.props.dndMode &&
-    typeof props.grid.props.dndMode === 'string' &&
-    !Tools.isEmpty(dndMode[props.grid.props.dndMode]) &&
-    table.bodyEditStatus === editStatus.none
-  ) {
-    return true;
-  }
-  return false;
-});
-
-const isSelectedRowComputed = computed(() => {
-  const selected = props.grid.getSelectedRow();
-  if (!Tools.isEmpty(selected)) {
-    return props.scope.row[props.rowKeyName] === props.grid.getSelectedRow()[props.rowKeyName];
-  }
-  return false;
-});
-
-// 得到表格数据行的中间高度
-const gridTrMiddleHeightComputed = computed(() => {
-  if (trRef?.value) {
-    return trRef.value.$el.offsetHeight / 2;
-  } else {
-    return (table.dense || table.denseBody ? 24 : 48) / 2;
-  }
-});
-
-// 批量更新数据
-const updates = (data, callback) => {
-  const requestParams = {
-    method: 'PUT',
-    headers: { 'content-type': 'application/json;charset=utf-8;' },
-    data: data,
-    url: props.url.dataUrl + '/updates',
-  };
-  noErrorAxios(requestParams)
-    .then((resp) => {
-      if (!Tools.isEmpty(callback)) {
-        callback(resp?.data);
-      }
-    })
-    .catch((error) => {
-      if (error.code === 1001) {
-        NotifyManager.error('服务器验证未通过');
-      } else {
-        ServerExceptionHandler.handle(error);
-      }
-    });
-};
-
-// 拖拽开始
-const onDragStart = (e, scope) => {
-  const img = new Image();
-  img.src = dndImage;
-  e.dataTransfer.setDragImage(img, 0, 0);
-  const currPageIndex = table.rows.findIndex((item) => {
-    return item[props.rowKeyName] === scope.row[props.rowKeyName];
-  });
-  const currPageStartIndex = scope.rowIndex - currPageIndex;
-  if (props.grid.props.pageable) {
-    table.dragRow = { row: { ...scope.row }, rowIndex: scope.rowIndex, currPageIndex: currPageIndex, currPageStartIndex };
-  } else {
-    table.dragRow = { row: { ...scope.row }, rowIndex: scope.rowIndex, currPageIndex: scope.rowIndex, currPageStartIndex };
-  }
-  e.dataTransfer.dropEffect = 'move';
-};
-const addDragTopStyle = (e) => {
-  if (e.target?.parentNode?.children) {
-    for (let i = 0; i < e.target.parentNode.children.length; i++) {
-      e.target.parentNode.children[i].style.borderTopWidth = '2px';
-      e.target.parentNode.children[i].style.borderTopStyle = 'dashed';
-      e.target.parentNode.children[i].style.borderTopColor = 'orange';
-    }
-  }
-};
-
-const removeDragTopStyle = (e) => {
-  if (e.target?.parentNode?.children) {
-    for (let i = 0; i < e.target.parentNode.children.length; i++) {
-      e.target.parentNode.children[i].style.borderTopWidth = '';
-      e.target.parentNode.children[i].style.borderTopStyle = '';
-      e.target.parentNode.children[i].style.borderTopColor = '';
-    }
-  }
-};
-const addDragBottomStyle = (e) => {
-  if (e.target?.parentNode?.children) {
-    for (let i = 0; i < e.target.parentNode.children.length; i++) {
-      e.target.parentNode.children[i].style.borderBottomWidth = '2px';
-      e.target.parentNode.children[i].style.borderBottomStyle = 'dashed';
-      e.target.parentNode.children[i].style.borderBottomColor = 'orange';
-    }
-  }
-};
-const removeDragBottomStyle = (e) => {
-  if (e.target?.parentNode?.children) {
-    for (let i = 0; i < e.target.parentNode.children.length; i++) {
-      e.target.parentNode.children[i].style.borderBottomWidth = '';
-      e.target.parentNode.children[i].style.borderBottomStyle = '';
-      e.target.parentNode.children[i].style.borderBottomColor = '';
-    }
-  }
-};
-// 拖拽至不可放置区域触发
-const onDragLeave = (e) => {
-  removeDragTopStyle(e);
-  removeDragBottomStyle(e);
-};
-// 拖拽过程触发
-const onDragOver = (e, scope) => {
-  e.preventDefault();
-  if (e.target.nodeName === 'TD' && e.offsetY <= gridTrMiddleHeightComputed.value) {
-    removeDragBottomStyle(e);
-    addDragTopStyle(e);
-  } else if (e.target.nodeName === 'TD' && e.offsetY > gridTrMiddleHeightComputed.value) {
-    removeDragTopStyle(e);
-    addDragBottomStyle(e);
-  }
-};
-// 拖拽放置时触发
-const onDrop = (e, scope) => {
-  e.preventDefault();
-  removeDragTopStyle(e);
-  removeDragBottomStyle(e);
-  if (table.dragRow.rowIndex === scope.rowIndex) {
-    return;
-  }
-  const dragRow = table.dragRow.row;
-  const currPageStartIndex = table.dragRow.currPageStartIndex;
-  table.rows.splice(table.dragRow.currPageIndex, 1);
-  if (e.offsetY <= gridTrMiddleHeightComputed.value && table.dragRow.rowIndex < scope.rowIndex) {
-    table.rows.splice(scope.rowIndex - currPageStartIndex - 1, 0, dragRow);
-  } else if (e.offsetY > gridTrMiddleHeightComputed.value && table.dragRow.rowIndex > scope.rowIndex) {
-    table.rows.splice(scope.rowIndex - currPageStartIndex + 1, 0, dragRow);
-  } else {
-    table.rows.splice(scope.rowIndex - currPageStartIndex, 0, dragRow);
-  }
-
-  const updateData = <any>[];
-  table.rows.forEach((item, index) => {
-    if (!Tools.isEmpty(item)) {
-      item[props.grid.props.dndOrderBy] = currPageStartIndex + index + 1;
-      updateData.push(toRaw(item));
-    }
-  });
-  if (props.grid.props.dndMode === dndMode.server && updateData.length > 0) {
-    // 访问后端更新排序
-    updates(updateData, () => {});
-  }
-
-  props.afterDragAndDrop(updateData);
-};
-
-const updateTicked = (evt: Event, row: any) => {
-  if (table.bodyEditStatus === 'none') {
-    props.getRow(table.rows, row[props.rowKeyName], false)[table.selectedField] = row[table.tickedField];
-    props.allTickedStatus();
-    if (!row[table.tickedField]) {
-      // 取消选中时将选中的单元格也清空
-      table.cellSelected = {};
-    }
-    if (props.grid.props.onUpdateTicked) {
-      props.grid.emit('updateTicked', { grid: props.grid, evt, row });
-    }
-  } else {
-    props.getRow(table.rows, row[props.rowKeyName], false)[table.tickedField] = !props.getRow(table.rows, row[props.rowKeyName], false)[table.tickedField];
-  }
-};
-</script>
-
-<style lang="css"></style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridConfig.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridConfig.vue
deleted file mode 100644
index 0a7a4df7..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridConfig.vue
+++ /dev/null
@@ -1,363 +0,0 @@
-<template>
-  <q-list padding style="min-width: 250px">
-    <q-item :clickable="false">
-      <q-item-section>
-        <q-item-label>全屏</q-item-label>
-      </q-item-section>
-      <q-item-section side>
-        <q-btn-group outline flat dense unelevated spread>
-          <q-btn
-            :color="!scope.inFullscreen ? 'primary' : ''"
-            :outline="scope.inFullscreen ? true : false"
-            dense
-            label="正常"
-            unelevated
-            @click="
-              () => {
-                if (scope.inFullscreen) {
-                  scope.toggleFullscreen();
-                  table.gridConfig = false;
-                }
-              }
-            "
-          />
-          <q-btn
-            :color="scope.inFullscreen ? 'primary' : ''"
-            :outline="!scope.inFullscreen ? true : false"
-            dense
-            label="全屏"
-            unelevated
-            @click="
-              () => {
-                if (!scope.inFullscreen) {
-                  scope.toggleFullscreen();
-                  table.gridConfig = false;
-                }
-              }
-            "
-          />
-        </q-btn-group>
-      </q-item-section>
-    </q-item>
-
-    <q-separator />
-    <q-item :clickable="false">
-      <q-item-section>
-        <q-item-label>复选框</q-item-label>
-      </q-item-section>
-      <q-item-section side>
-        <q-btn-group outline flat dense unelevated spread>
-          <q-btn
-            :color="table.checkboxSelection ? 'primary' : ''"
-            :outline="table.checkboxSelection ? false : true"
-            dense
-            label="显示"
-            unelevated
-            @click="
-              () => {
-                table.checkboxSelection = true;
-                grid.refreshStyle(100);
-              }
-            "
-          />
-          <q-btn
-            :color="table.checkboxSelection ? '' : 'primary'"
-            :outline="table.checkboxSelection ? true : false"
-            dense
-            label="隐藏"
-            unelevated
-            @click="
-              () => {
-                table.checkboxSelection = false;
-                grid.refreshStyle(100);
-              }
-            "
-          />
-        </q-btn-group>
-      </q-item-section>
-    </q-item>
-
-    <template v-if="!grid.props.tree">
-      <q-separator />
-      <q-item :clickable="false">
-        <q-item-section>
-          <q-item-label>序号</q-item-label>
-        </q-item-section>
-        <q-item-section side>
-          <q-btn-group outline flat dense unelevated spread>
-            <q-btn
-              :color="table.sortNo ? 'primary' : ''"
-              :outline="table.sortNo ? false : true"
-              dense
-              label="显示"
-              unelevated
-              @click="
-                () => {
-                  table.columns[0].showIf = true;
-                  table.sortNo = true;
-                  grid.refreshStyle(100);
-                }
-              "
-            />
-            <q-btn
-              :color="table.sortNo ? '' : 'primary'"
-              :outline="table.sortNo ? true : false"
-              dense
-              label="隐藏"
-              unelevated
-              @click="
-                () => {
-                  table.columns[0].showIf = false;
-                  table.sortNo = false;
-                  grid.refreshStyle(100);
-                }
-              "
-            />
-          </q-btn-group>
-        </q-item-section>
-      </q-item>
-    </template>
-
-    <q-separator />
-    <q-expansion-item label="分割线">
-      <q-card>
-        <q-card-section>
-          <q-item v-ripple tag="label" dense>
-            <q-item-section side>
-              <q-checkbox v-model="separatorHorizontal" dense @update:model-value="separatorChange('horizontal', separatorHorizontal)" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>水平</q-item-label>
-            </q-item-section>
-          </q-item>
-          <q-item v-ripple tag="label" dense>
-            <q-item-section side>
-              <q-checkbox v-model="separatorVertical" dense @update:model-value="separatorChange('vertical', separatorVertical)" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>垂直</q-item-label>
-            </q-item-section>
-          </q-item>
-          <q-item v-ripple tag="label" dense>
-            <q-item-section side>
-              <q-checkbox v-model="separatorCell" dense @update:model-value="separatorChange('cell', separatorCell)" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>单元格</q-item-label>
-            </q-item-section>
-          </q-item>
-          <q-item v-ripple tag="label" dense>
-            <q-item-section side>
-              <q-checkbox v-model="separatorNone" dense @update:model-value="separatorChange('none', separatorNone)" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>无</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-card-section>
-      </q-card>
-    </q-expansion-item>
-
-    <q-separator />
-    <q-expansion-item label="紧凑模式">
-      <q-card>
-        <q-card-section>
-          <q-item v-ripple tag="label" dense>
-            <q-item-section side>
-              <q-checkbox v-model="table.dense" dense @update:model-value="denseChange()" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>紧凑</q-item-label>
-            </q-item-section>
-          </q-item>
-          <q-item v-ripple tag="label" dense>
-            <q-item-section side>
-              <q-checkbox v-model="table.denseToolbar" dense @update:model-value="denseChange" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>按钮栏紧凑</q-item-label>
-            </q-item-section>
-          </q-item>
-          <q-item v-ripple tag="label" dense>
-            <q-item-section side>
-              <q-checkbox v-model="table.denseHeader" dense @update:model-value="denseChange" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>列头紧凑</q-item-label>
-            </q-item-section>
-          </q-item>
-          <q-item v-ripple tag="label" dense>
-            <q-item-section side>
-              <q-checkbox v-model="table.denseBody" dense @update:model-value="denseChange" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>内容紧凑</q-item-label>
-            </q-item-section>
-          </q-item>
-          <q-item v-ripple tag="label" dense>
-            <q-item-section side>
-              <q-checkbox v-model="table.denseBottom" dense @update:model-value="denseChange" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>分页栏紧凑</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-card-section>
-      </q-card>
-    </q-expansion-item>
-
-    <q-separator />
-    <q-item :clickable="false">
-      <q-item-section>
-        <q-item-label class="nowrap text-nowrap">固定列</q-item-label>
-      </q-item-section>
-      <q-item-section side>
-        <q-select
-          v-model="table.stickyNum"
-          emit-value
-          map-options
-          :hide-bottom-space="true"
-          :hide-hint="true"
-          :outlined="true"
-          :dense="true"
-          :options="stickyOptions"
-          @update:model-value="
-            () => {
-              grid.refreshStyle(500);
-            }
-          "
-        >
-        </q-select>
-      </q-item-section>
-    </q-item>
-
-    <q-separator />
-    <q-item-label header>显示列</q-item-label>
-
-    <template v-for="col in table.columns" :key="col.name">
-      <q-item v-if="showColumn(col.name)" v-ripple tag="label" dense>
-        <q-item-section side>
-          <q-checkbox
-            v-model="col.showIf"
-            dense
-            @update:model-value="
-              () => {
-                grid.refreshStyle(100);
-              }
-            "
-          />
-        </q-item-section>
-        <q-item-section>
-          <q-item-label>{{ col.label || col.name }}</q-item-label>
-        </q-item-section>
-      </q-item>
-    </template>
-  </q-list>
-</template>
-<script setup lang="ts">
-import { inject, ref, watch } from 'vue';
-const props = defineProps({
-  scope: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  moreColumnTitleArray: {
-    // 多表头数组
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  grid: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-});
-const table = inject('table');
-const stickyOptions = [
-  { label: '不固定', value: 0 },
-  { label: '固定1列', value: 1 },
-  { label: '固定2列', value: 2 },
-  { label: '固定3列', value: 3 },
-  { label: '固定4列', value: 4 },
-  { label: '固定5列', value: 5 },
-  { label: '固定6列', value: 6 },
-  { label: '固定7列', value: 7 },
-  { label: '固定8列', value: 8 },
-  { label: '固定9列', value: 9 },
-  { label: '固定10列', value: 10 },
-];
-const separatorHorizontal = ref(false);
-const separatorVertical = ref(false);
-const separatorCell = ref(false);
-const separatorNone = ref(false);
-
-const setSeparatorValue = (value) => {
-  if (value === 'horizontal') {
-    separatorHorizontal.value = true;
-    separatorVertical.value = false;
-    separatorCell.value = false;
-    separatorNone.value = false;
-  } else if (value === 'vertical') {
-    separatorHorizontal.value = false;
-    separatorVertical.value = true;
-    separatorCell.value = false;
-    separatorNone.value = false;
-  } else if (value === 'cell') {
-    separatorHorizontal.value = false;
-    separatorVertical.value = false;
-    separatorCell.value = true;
-    separatorNone.value = false;
-  } else if (value === 'none') {
-    separatorHorizontal.value = false;
-    separatorVertical.value = false;
-    separatorCell.value = false;
-    separatorNone.value = true;
-  }
-};
-
-if (table.separator) {
-  setSeparatorValue(table.separator);
-}
-
-const separatorChange = (separator, value) => {
-  if (!value) {
-    setSeparatorValue(table.separator);
-  } else {
-    table.separator = separator;
-  }
-};
-
-const showColumn = (name) => {
-  if (props.moreColumnTitleArray.length > 0) {
-    if (
-      props.moreColumnTitleArray[0].findIndex((item) => {
-        return item.name === name;
-      }) > -1
-    ) {
-      return true;
-    } else {
-      return false;
-    }
-  } else {
-    return true;
-  }
-};
-
-watch(
-  () => table.separator,
-  (newVal, oldVal) => {
-    if (newVal) {
-      setSeparatorValue(newVal);
-    }
-  },
-);
-
-const denseChange = () => {
-  props.grid.refreshStyle(0);
-};
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridEditToolbar.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridEditToolbar.vue
deleted file mode 100644
index f013eb10..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridEditToolbar.vue
+++ /dev/null
@@ -1,359 +0,0 @@
-<template>
-  <q-tr v-if="showRowEditButtonComputed">
-    <q-td :colspan="props.noDataTrColspan">
-      <div class="editButton text-center">
-        <w-toolbar
-          :dense="true"
-          align="center"
-          :grid="props.grid"
-          :buttons="[
-            {
-              label: '保存',
-              name: 'save',
-              icon: 'save',
-              color: 'primary',
-              outline: false,
-              click: async (args) => {
-                save(args);
-              },
-            },
-            {
-              label: '取消',
-              name: 'cancel',
-              icon: 'close',
-              color: 'blue-grey',
-              outline: false,
-              click: (args) => {
-                if (table.bodyEditStatus === 'rowEdit' || table.bodyEditStatus === 'cellEdit') {
-                  props.setOldValue(args.selected);
-                } else if (table.bodyEditStatus === 'rowsEdit') {
-                  props.grid.getRows().forEach((item) => {
-                    props.setOldValue(item);
-                  });
-                }
-                table.bodyEditStatus = 'none';
-              },
-            },
-          ]"
-        ></w-toolbar>
-      </div>
-    </q-td>
-  </q-tr>
-</template>
-<script setup lang="ts">
-import { computed, inject, ref, toRaw } from 'vue';
-import { Tools, NotifyManager, noErrorAxios, t, ServerExceptionHandler } from '@/platform';
-import { editStatus } from './ts/grid';
-
-const props = defineProps({
-  grid: {
-    // 表格实例
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  url: {
-    // 表格所有的url
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  rowKeyName: {
-    type: String,
-    default: '',
-  },
-  row: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  getRow: {
-    type: Function,
-    default: () => {},
-  },
-  getRowComponentRefs: {
-    type: Function,
-    default: () => {},
-  },
-  setOldValue: {
-    type: Function,
-    default: () => {},
-  },
-  noDataTrColspan: {
-    type: Number,
-    default: () => {
-      return 0;
-    },
-  },
-});
-const table = inject('table');
-
-const validate = async (refs) => {
-  let result = true;
-  for (let i = 0; i < refs.length; i++) {
-    const component = refs[i].getComponentRef();
-    if (component) {
-      if (!Tools.isEmpty(refs[i].getComponentOneRef)) {
-        const componentOne = refs[i].getComponentOneRef();
-        if (!Tools.isEmpty(componentOne) && !Tools.isEmpty(componentOne.validate)) {
-          const componentOneValidateResult = await componentOne.validate();
-          if (!componentOneValidateResult) {
-            result = false;
-            break;
-          }
-        }
-      }
-      if (props.grid.props.tree && !Tools.isEmpty(component)) {
-        const keys = Object.keys(component);
-        for (let k = 0; k < keys.length; k++) {
-          if (!Tools.isEmpty(component[keys[k]]?.validate)) {
-            const treeComponentValidateResult = await component[keys[k]].validate();
-            if (!treeComponentValidateResult) {
-              result = false;
-              break;
-            }
-          }
-        }
-      } else if (!Tools.isEmpty(component.validate)) {
-        const componentValidateResult = await component.validate();
-        if (!componentValidateResult) {
-          result = false;
-          break;
-        }
-      }
-    }
-  }
-  return result;
-};
-
-const rowSave = (args) => {
-  let data = args.selected['_rowOldValue'];
-  let submitFlag = true;
-  let localeUpdateFlag = false;
-  let url = '';
-  // 执行保存
-  props.grid.emit('beforeEditorDataSubmit', {
-    grid: props.grid,
-    data: data,
-    callback: (handlerRequestParams: any | boolean, localeUpdate: boolean = false) => {
-      if (typeof handlerRequestParams === 'boolean' && handlerRequestParams === false) {
-        submitFlag = false;
-      } else {
-        data = handlerRequestParams;
-      }
-      localeUpdateFlag = localeUpdate;
-    },
-  });
-  if (localeUpdateFlag && submitFlag) {
-    // 只进行本地修改，不访问服务器
-    props.grid.updateLocalData(data);
-    table.bodyEditStatus = 'none';
-  } else {
-    if (submitFlag) {
-      data = { ...args.selected, ...data };
-      if (!Tools.isEmpty(props.url.editDataUrl)) {
-        url = props.url.editDataUrl + '/' + args.selected[props.grid.props.primaryKey];
-      } else {
-        url = props.url.dataUrl + '/' + args.selected[props.grid.props.primaryKey];
-      }
-      const requestParams = {
-        method: 'PUT',
-        headers: { 'content-type': 'application/json;charset=utf-8;' },
-        data: data,
-        url: url,
-      };
-      noErrorAxios(requestParams)
-        .then((resp) => {
-          props.grid.emit('afterEditorDataSubmit', { grid: props.grid, data: resp.data });
-          NotifyManager.info(t('tip.operationSuccess'));
-          if (props.grid.props.refreshData || !props.grid.props.tree) {
-            props.grid.refresh();
-          } else if (resp.data) {
-            props.grid.updateLocalData(data);
-          }
-          // 保存成功后退出编辑状态
-          table.bodyEditStatus = 'none';
-        })
-        .catch((error) => {
-          if (error.code === 1001) {
-            NotifyManager.error('服务器验证未通过');
-          } else {
-            ServerExceptionHandler.handle(error);
-          }
-        });
-    }
-  }
-};
-
-// 检查数据是否修改过
-const checkDataModified = (row) => {
-  const keys = Object.keys(row['_rowOldValue']);
-  return keys.some((key) => row[key] !== row['_rowOldValue'][key]);
-};
-
-const treeDataPush = (arr) => {
-  const data = <any>[];
-  if (arr && arr.length > 0) {
-    arr.forEach((item) => {
-      if (checkDataModified(item)) {
-        data.push(item['_rowOldValue']);
-      }
-      const childrenData = treeDataPush(item.children);
-      if (childrenData.length > 0) {
-        data.push(...childrenData);
-      }
-    });
-  }
-  return data;
-};
-
-const rowsSave = (args) => {
-  let data = <any>[];
-  const rows = args.grid.getRows();
-  const isTree = props.grid.props.tree;
-  rows.forEach((item) => {
-    if (checkDataModified(item)) {
-      data.push(item['_rowOldValue']);
-    }
-    if (isTree && item.children) {
-      const childrenData = treeDataPush(item.children);
-      if (childrenData.length > 0) {
-        data.push(...childrenData);
-      }
-    }
-  });
-  let submitFlag = true;
-  let localeUpdateFlag = false;
-  // 执行保存
-  props.grid.emit('beforeEditorDataSubmit', {
-    grid: props.grid,
-    data: data,
-    callback: (handlerRequestParams: any | boolean, localeUpdate: boolean = false) => {
-      if (typeof handlerRequestParams === 'boolean' && handlerRequestParams === false) {
-        submitFlag = false;
-      } else {
-        data = handlerRequestParams;
-      }
-      localeUpdateFlag = localeUpdate;
-    },
-  });
-  if ((localeUpdateFlag && submitFlag) || props.grid.props.localMode) {
-    // 只进行本地修改，不访问服务器
-    data.forEach((item) => {
-      props.grid.updateLocalData(item);
-    });
-    table.bodyEditStatus = 'none';
-  } else {
-    if (submitFlag) {
-      updates(data, (callbackData) => {
-        NotifyManager.info(t('tip.operationSuccess'));
-        if (props.grid.props.refreshData || !props.grid.props.tree) {
-          props.grid.refresh();
-        } else if (!Tools.isEmpty(callbackData)) {
-          callbackData.forEach((item) => {
-            props.grid.updateLocalData(item);
-          });
-        }
-        // 保存成功后退出编辑状态
-        table.bodyEditStatus = 'none';
-      });
-    }
-  }
-};
-
-const save = async (args) => {
-  const refs = props.getRowComponentRefs(table.bodyEditStatus === 'rowEdit' || table.bodyEditStatus === 'cellEdit' ? args.selected[props.rowKeyName] : []);
-  const result = await validate(refs);
-  if (!result) {
-    NotifyManager.error('验证未通过');
-  } else {
-    if (table.bodyEditStatus === 'rowEdit' || table.bodyEditStatus === 'cellEdit') {
-      rowSave(args);
-    } else if (table.bodyEditStatus === 'rowsEdit') {
-      rowsSave(args);
-    }
-  }
-};
-
-// 批量更新数据
-const updates = (data, callback) => {
-  const requestParams = {
-    method: 'PUT',
-    headers: { 'content-type': 'application/json;charset=utf-8;' },
-    data: data,
-    url: props.url.dataUrl + '/updates',
-  };
-  noErrorAxios(requestParams)
-    .then((resp) => {
-      if (!Tools.isEmpty(callback)) {
-        callback(resp?.data);
-      }
-    })
-    .catch((error) => {
-      if (error.code === 1001) {
-        NotifyManager.error('服务器验证未通过');
-      } else {
-        ServerExceptionHandler.handle(error);
-      }
-    });
-};
-
-const showRowEditButtonComputed = computed(() => {
-  if (props.grid.props.localMode && table.bodyEditStatus !== editStatus.rows) {
-    return false;
-  }
-  if (table.bodyEditStatus === 'cellEdit') {
-    const selected = props.grid.getSelectedCell();
-    if (selected?.colName && selected.colName === table.cellSelected['colName'] && selected.row[props.rowKeyName] === props.row[props.rowKeyName]) {
-      return true;
-    }
-    return false;
-  } else if (table.bodyEditStatus === 'rowEdit' && isSelectedRowComputed.value) {
-    return true;
-  } else if (table.bodyEditStatus === 'rowsEdit' && table.rows.length > 0 && isLastRowComputed.value) {
-    return true;
-  } else {
-    return false;
-  }
-});
-
-const checkLastRow = (row) => {
-  if (props.grid.props.tree && row['expand'] && !Tools.isEmpty(row.children) && row.children.length > 0) {
-    const childrenLastRow = row.children[row.children.length - 1];
-    if (childrenLastRow['expand'] && !Tools.isEmpty(childrenLastRow.children) && childrenLastRow.children.length > 0) {
-      return checkLastRow(childrenLastRow);
-    } else {
-      return childrenLastRow[props.rowKeyName] === props.row[props.rowKeyName];
-    }
-  } else {
-    return row[props.rowKeyName] === props.row[props.rowKeyName];
-  }
-};
-
-const isLastRowComputed = computed(() => {
-  const lastRow = table.rows[table.rows.length - 1];
-  return checkLastRow(lastRow);
-});
-
-const isSelectedRowComputed = computed(() => {
-  const selected = props.grid.getSelectedRow();
-  if (!Tools.isEmpty(selected)) {
-    return props.row[props.rowKeyName] === props.grid.getSelectedRow()[props.rowKeyName];
-  }
-  return false;
-});
-
-defineExpose({});
-</script>
-
-<style lang="css">
-.editButton {
-  position: sticky;
-  background-color: white;
-  left: 45%;
-  width: 150px;
-}
-</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridEditor.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridEditor.vue
deleted file mode 100644
index d7435b26..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridEditor.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<template>
-  <w-dialog ref="dialogRef" v-bind="props.grid.props.editor.dialog" :title="dialog.dialogTitle" :buttons="dialogButtonsComputed">
-    <w-form ref="dialogFormRef" v-bind="props.grid.props.editor.form" class="pt-1.5 px-1.5"></w-form>
-  </w-dialog>
-</template>
-<script setup lang="ts">
-import { ref, reactive, inject, computed } from 'vue';
-import { t, Tools, noErrorAxios, NotifyManager, ServerExceptionHandler } from '@/platform';
-
-const dialogRef = ref();
-const dialogFormRef = ref();
-
-const props = defineProps({
-  grid: {
-    // 表格实例
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  url: {
-    // 表格所有的url
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  request: {
-    type: Function,
-    default: () => {},
-  },
-  setRowDataExtraProperty: {
-    type: Function,
-    default: () => {},
-  },
-  getRow: {
-    type: Function,
-    default: () => {},
-  },
-});
-const table = inject('table');
-
-const dialogButtonsComputed = computed(() => {
-  if (props.grid.props.editor?.dialog?.buttons) {
-    return [...props.grid.props.editor.dialog.buttons, ...dialog.dialogButtons];
-  }
-  return dialog.dialogButtons;
-});
-
-const save = async () => {
-  dialog.dialogButtons[0].loading = true;
-  const formStatus = dialogFormRef.value.getStatus();
-  const validate = await dialogFormRef.value.validate();
-  if (validate) {
-    let dialogFormData = dialogFormRef.value.getData();
-    const selected = props.grid.getSelectedRow();
-    if (formStatus === 'edit' && selected[props.grid.props.primaryKey] && Tools.isEmpty(dialogFormData[props.grid.props.primaryKey])) {
-      dialogFormData[props.grid.props.primaryKey] = selected[props.grid.props.primaryKey];
-    }
-    let submitFlag = true;
-    let closeDialog = true;
-    props.grid.emit('beforeEditorDataSubmit', {
-      grid: props.grid,
-      data: dialogFormData,
-      callback: (handlerRequestParams: any | boolean, closeFlag: boolean = true) => {
-        if (typeof handlerRequestParams === 'boolean' && handlerRequestParams === false) {
-          submitFlag = false;
-        } else {
-          dialogFormData = handlerRequestParams;
-        }
-        closeDialog = closeFlag;
-      },
-    });
-    if (submitFlag) {
-      if (formStatus === 'addTop') {
-        dialogFormData[props.grid.props.foreignKey] = null;
-      } else if (formStatus === 'addChild') {
-        dialogFormData[props.grid.props.foreignKey] = selected[props.grid.props.primaryKey];
-      } else if ((formStatus === 'edit' || formStatus === 'clone') && selected[props.grid.props.foreignKey]) {
-        dialogFormData[props.grid.props.foreignKey] = selected[props.grid.props.foreignKey];
-      }
-      if (formStatus === 'edit') {
-        // 将行数据默认添加到传递给后端的数据中
-        dialogFormData = { ...selected, ...dialogFormData };
-      }
-      if (props.grid.props.localMode) {
-        if (formStatus === 'add' || formStatus === 'clone' || formStatus === 'addTop' || formStatus === 'addChild') {
-          addData(dialogFormData);
-        } else {
-          updateData(dialogFormData);
-        }
-        dialog.dialogButtons[0].loading = false;
-        if (closeDialog) {
-          dialogRef.value.hide();
-        }
-      } else {
-        let requestParams = {
-          method: getMethod(formStatus),
-          headers: { 'content-type': 'application/json;charset=utf-8;' },
-          data: dialogFormData,
-          url: getUrl(formStatus, dialogFormData),
-        };
-        dialog.dialogButtons[0].loading = false;
-        noErrorAxios(requestParams)
-          .then((resp) => {
-            dialog.dialogButtons[0].loading = false;
-            props.grid.emit('afterEditorDataSubmit', { grid: props.grid, data: resp.data });
-            NotifyManager.info(t('tip.operationSuccess'));
-            if (closeDialog) {
-              dialogRef.value.hide();
-            }
-            if (props.grid.props.refreshData || !props.grid.props.tree) {
-              props.grid.refresh();
-            } else if (resp.data && (formStatus === 'add' || formStatus === 'clone' || formStatus === 'addTop' || formStatus === 'addChild')) {
-              addData(resp.data);
-            } else if (resp.data) {
-              updateData(resp.data);
-            }
-          })
-          .catch((error) => {
-            if (error?.code === 1001) {
-              // 验证错误
-              dialogFormRef.value.setValidationErrors(error.data);
-            } else {
-              ServerExceptionHandler.handle(error);
-            }
-            dialog.dialogButtons[0].loading = false;
-          });
-      }
-    } else {
-      dialog.dialogButtons[0].loading = false;
-      if (closeDialog) {
-        dialogRef.value.hide();
-      }
-    }
-  } else {
-    dialog.dialogButtons[0].loading = false;
-  }
-};
-
-const dialog = reactive({
-  dialogTitle: t('action.addNew'),
-  dialogButtons: [
-    {
-      icon: 'beenhere',
-      labelI18nKey: props.grid.props.localMode ? 'confirm' : 'action.submit',
-      label: t(props.grid.props.localMode ? 'confirm' : 'action.submit'),
-      loading: false,
-      click: () => {
-        save();
-      },
-    },
-  ],
-});
-
-// 新增树表格中的数据
-const addTreeRow = (row) => {
-  if (Tools.isEmpty(row[props.grid.props.foreignKey])) {
-    table.rows.push(row);
-  } else {
-    const parent = props.getRow(table.rows, row[props.grid.props.foreignKey], true);
-    if (parent) {
-      if (parent['children'] && Array.isArray(parent['children'])) {
-        parent['children'].push(row);
-      } else {
-        parent['children'] = [row];
-      }
-    }
-  }
-};
-
-const addData = (rowData) => {
-  if (props.grid.props.tree) {
-    addTreeRow(rowData);
-    props.setRowDataExtraProperty(table.rows);
-  } else {
-    props.grid.addLocalData(rowData, false);
-  }
-};
-const updateData = (rowData) => {
-  const selected = props.grid.getSelectedRow();
-  if (Tools.isEmpty(rowData[props.grid.props.primaryKey])) {
-    rowData[props.grid.props.primaryKey] = selected[props.grid.props.primaryKey];
-  }
-  rowData[props.grid.props.selectedField] = true;
-  if (selected['children']) {
-    rowData['children'] = selected['children'];
-  }
-  props.grid.updateLocalData(rowData);
-};
-
-const getMethod = (formStatus: string) => {
-  if (formStatus === 'add' || formStatus === 'clone' || formStatus === 'addTop' || formStatus === 'addChild') {
-    return 'POST';
-  } else {
-    return 'PUT';
-  }
-};
-
-const getUrl = (formStatus: string, formData: any) => {
-  if (formStatus === 'add' || formStatus === 'clone' || formStatus === 'addTop' || formStatus === 'addChild') {
-    if (!Tools.isEmpty(props.url.addDataUrl)) {
-      return props.url.addDataUrl;
-    } else {
-      return props.url.dataUrl;
-    }
-  } else {
-    if (!Tools.isEmpty(props.url.editDataUrl)) {
-      return props.url.editDataUrl + '/' + formData[props.grid.props.primaryKey];
-    } else {
-      return props.url.dataUrl + '/' + formData[props.grid.props.primaryKey];
-    }
-  }
-};
-
-const resetButtonLabel = () => {
-  dialog.dialogButtons[0].label = t(dialog.dialogButtons[0].labelI18nKey);
-};
-const getDialog = () => {
-  return dialogRef.value;
-};
-const getForm = () => {
-  return dialogFormRef.value;
-};
-
-defineExpose({
-  resetButtonLabel,
-  getDialog,
-  getForm,
-});
-</script>
-<style lang="css"></style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridPagination.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridPagination.vue
deleted file mode 100644
index fa743364..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridPagination.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <template v-if="props.grid.props.pageable && !props.grid.props.tree">
-    <template v-if="props.state.refHeightWidth.middleWidth > 600">
-      <q-pagination
-        v-model="page"
-        :boundary-links="props.state.pagination.config.boundaryLinks"
-        :boundary-numbers="props.state.pagination.config.boundaryNumbers"
-        :direction-links="props.state.pagination.config.directionLinks"
-        :ellipses="props.state.pagination.config.ellipses"
-        :max-pages="props.state.pagination.config.maxPages"
-        :min="1"
-        :max="props.scope.pagesNumber"
-        :size="props.denseBottom ? '10px' : ''"
-        @update:model-value="pageChange"
-      />
-    </template>
-    <template v-else>
-      <q-pagination
-        v-model="page"
-        :boundary-links="props.state.pagination.config.boundaryLinks"
-        :boundary-numbers="props.state.pagination.config.boundaryNumbers"
-        :direction-links="props.state.pagination.config.directionLinks"
-        :ellipses="props.state.pagination.config.ellipses"
-        :max-pages="3"
-        :min="1"
-        :max="props.scope.pagesNumber"
-        :size="props.denseBottom ? '10px' : ''"
-        @update:model-value="pageChange"
-      />
-    </template>
-    <span>{{ $t('tip.pagenation.totalRecord', { count: props.state.pagination.rowsNumber }) }}</span>
-  </template>
-  <template v-else> {{ $t('tip.pagenation.totalRecord', { count: props.state.pagination.rowsNumber }) }} </template>
-</template>
-<script setup lang="ts">
-const page = defineModel({ type: Number, default: 1 });
-const props = defineProps({
-  grid: {
-    // 表格实例
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  scope: {
-    // 顶部插槽属性
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  state: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  denseBottom: {
-    type: Boolean,
-    default: false,
-  },
-  request: {
-    type: Function,
-    default: () => {},
-  },
-});
-
-const pageChange = (value) => {
-  page.value = value;
-  props.request(props.state);
-};
-</script>
-<style lang="css"></style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridTd.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridTd.vue
deleted file mode 100644
index c1018d9c..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridTd.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<template>
-  <template v-if="rowSpanIsFirstComputed">
-    <q-td
-      ref="tdRef"
-      :key="col.name"
-      :props="scope"
-      :title="titleComputed"
-      :class="props.grid.props.selectMode === selectMode.cell && (table.bodyEditStatus === 'none' || props.grid.props.localMode) ? tdClassComputed : ''"
-      :rowspan="rowSpanComputed"
-      :style="col.type && table.bodyEditStatus !== 'none' ? 'width: ' + (tdWidth - 24) + 'px;' : ''"
-      @click="
-        () => {
-          // 判定是否要退出编辑模式
-          if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectMode === selectMode.cell) {
-            if (table['cellSelected']['colName'] !== col['name'] || table['cellSelected']['row'][props.rowKeyName] !== props.scope.row[props.rowKeyName]) {
-              table.bodyEditStatus = 'none';
-            }
-          } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectMode === selectMode.cell) {
-            if (table['cellSelected']['row'][props.rowKeyName] !== props.scope.row[props.rowKeyName]) {
-              table.bodyEditStatus = 'none';
-            }
-          }
-          if (table.bodyEditStatus === 'none' && props.grid.props.selectMode === selectMode.cell) {
-            table['cellSelected'] = {
-              row: toRaw(scope.row),
-              rowKey: scope.row[props.rowKeyName],
-              primaryKey: scope.row[props.grid.props.primaryKey],
-              colName: col['name'],
-              value: scope.row[col['name']],
-            };
-          }
-        }
-      "
-    >
-      <template v-if="col.name === '_sortNo_'">
-        {{ scope.rowIndex + 1 }}
-      </template>
-      <template
-        v-if="
-          !Tools.isEmpty(col.type) &&
-          ((props.isSelectedRow && table.bodyEditStatus === 'rowEdit') ||
-            table.bodyEditStatus === 'rowsEdit' ||
-            (isSelectedCellComputed && table.bodyEditStatus === 'cellEdit'))
-        "
-      >
-        <template v-if="props.grid.props.localMode && table.bodyEditStatus !== editStatus.rows">
-          <component
-            :is="col.type"
-            ref="componentRef"
-            v-bind="componentAttrs(col)"
-            v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)[col.name]"
-            bg-color="light-green-1"
-          ></component>
-        </template>
-        <template v-else>
-          <component
-            :is="col.type"
-            ref="componentRef"
-            v-bind="componentAttrs(col)"
-            v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)['_rowOldValue'][col.name]"
-            bg-color="light-green-1"
-          ></component>
-        </template>
-      </template>
-      <template v-else>
-        <template v-if="!Tools.isEmpty(value) && typeof value === 'object' && value.componentType && value.bindModelValue">
-          <component
-            :is="value.componentType"
-            v-bind="value.attrs"
-            v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)[col.name]"
-          ></component>
-        </template>
-        <template v-else-if="!Tools.isEmpty(value) && typeof value === 'object' && value.componentType">
-          <component :is="value.componentType" v-bind="value.attrs"></component>
-        </template>
-        <template v-else>
-          <span v-dompurify-html="Tools.isUndefinedOrNull(value) ? '' : value"></span>
-        </template>
-      </template>
-    </q-td>
-  </template>
-</template>
-<script setup lang="ts">
-import { inject, computed, ref, toRaw, onMounted } from 'vue';
-import { Tools } from '@/platform';
-import { selectMode, editStatus } from './ts/grid.ts';
-
-const tdRef = ref();
-const componentRef = ref();
-const tdWidth = ref(0);
-const props = defineProps({
-  grid: {
-    type: Object,
-    default: () => {},
-  },
-  getRow: {
-    type: Function,
-    default: () => {},
-  },
-  rowKeyName: {
-    type: String,
-    default: '',
-  },
-  scope: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  col: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  value: {
-    type: [Object, String, Number, Boolean],
-    default: '',
-  },
-  isSelectedRow: {
-    type: Boolean,
-    default: false,
-  },
-});
-const table = inject('table');
-
-const getComponentRef = () => {
-  return componentRef.value;
-};
-
-const isSelectedCellComputed = computed(() => {
-  const selected = props.grid.getSelectedCell();
-  if (selected?.colName && props.scope.row[props.rowKeyName] === selected['row'][props.rowKeyName] && props.col['name'] === selected.colName) {
-    return true;
-  }
-  return false;
-});
-
-const titleComputed = computed(() => {
-  if (table['columns'] && table['columns'].length > 0) {
-    const column = table['columns'].find((item) => item['name'] === props.col.name);
-    if (column && column['title'] && typeof column['title'] === 'function') {
-      return column.title({ grid: props.grid, row: toRaw(props.scope.row), value: props.scope.row[props.col.name] });
-    } else if (column && column['title']) {
-      return column['title'];
-    }
-  }
-  if (props.col.classes?.indexOf('truncate') > -1 && !Tools.isEmpty(props.value) && typeof props.value !== 'object') {
-    return props.value;
-  }
-  return '';
-});
-
-const rowSpanComputed = computed(() => {
-  if (Object.keys(table.mergeRecords).length > 0) {
-    const column = table.mergeRecords[props.col['name']];
-    if (column && column[props.scope['row'][props.col['name']]].length > 1) {
-      return column[props.scope['row'][props.col['name']]].length;
-    }
-  }
-  return 1;
-});
-
-const rowSpanIsFirstComputed = computed(() => {
-  if (Object.keys(table.mergeRecords).length > 0) {
-    const column = table.mergeRecords[props.col['name']];
-    if (props.col['name'] === '_sortNo_') {
-      return true;
-    } else if (column && column[props.scope['row'][props.col['name']]].length > 1) {
-      return props.scope['row'][props.rowKeyName] === column[props.scope['row'][props.col['name']]][0];
-    }
-  }
-  return true;
-});
-
-const tdClassComputed = computed(() => {
-  const tdClass = <any>[];
-  if (props.grid.props.selectMode === selectMode.cell) {
-    tdClass.push('cellHover');
-  }
-  if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) {
-    if (table['cellSelected']['colName'] === props.col['name'] && table['cellSelected']['rowKey'] === props.scope.row[props.rowKeyName])
-      tdClass.push('cellSelected');
-  }
-  return tdClass;
-});
-
-const componentAttrs = (col) => {
-  if (col.attrs) {
-    return col.attrs;
-  } else if (props.grid.props.editor?.form?.fields) {
-    const field = props.grid.props.editor.form.fields.find((item) => item['name'] === col.name);
-    if (field) {
-      return { ...field, label: undefined };
-    }
-  }
-  return undefined;
-};
-
-onMounted(() => {
-  if (tdRef.value?.$el) {
-    tdWidth.value = tdRef.value.$el.clientWidth;
-  }
-});
-
-defineExpose({
-  getComponentRef,
-});
-</script>
-<style lang="css"></style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridTop.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridTop.vue
deleted file mode 100644
index 96c221a6..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridTop.vue
+++ /dev/null
@@ -1,786 +0,0 @@
-<template>
-  <div class="col">
-    <w-form ref="formRef" v-bind="props.grid.props.queryFormAttrs" :fields="queryFormFieldsComputed" :cols-num="props.grid.props.queryFormColsNum"></w-form>
-    <div
-      v-if="props.grid.props.title || buttons_.length > 0 || props.grid.props.configButton || fields.length > 0"
-      class="flex flex-nowrap items-end"
-      :class="fields.length > 0 ? 'pt-2.5' : ''"
-    >
-      <div class="flex-none">{{ $t(props.grid.props.title ? props.grid.props.title : '') }}</div>
-      <div class="flex-1">
-        <w-toolbar
-          ref="toolbarRef"
-          :dense="denseToolbarComputed"
-          v-bind="props.grid.props.toolbarConfigure"
-          :buttons="toolbarButtonsComputed"
-          :grid="props.grid"
-        ></w-toolbar>
-      </div>
-      <div v-if="props.grid.props.configButton" class="flex-none pl-1">
-        <q-btn round dense :size="denseToolbarComputed ? '13px' : undefined" icon="manage_accounts" unelevated outline>
-          <q-popup-proxy v-model="table.gridConfig">
-            <GridConfig :scope="props.scope" :more-column-title-array="props.moreColumnTitleArray" :grid="props.grid"></GridConfig>
-          </q-popup-proxy>
-        </q-btn>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed, inject, ref, reactive, nextTick, onBeforeMount, toRaw } from 'vue';
-import { useQuasar, exportFile } from 'quasar';
-import { axios, Tools, t, NotifyManager } from '@/platform';
-import { selectMode, formStatus, editStatus } from './ts/grid';
-import GridConfig from './GridConfig.vue';
-
-const $q = useQuasar();
-
-const formRef = ref();
-const toolbarRef = ref();
-const localeFlag = ref(false);
-const fields = ref(<any>[]);
-const buttons_ = ref(<any>[]);
-const moreQueryStatus = ref(false); // 当前更多查询状态是否激活
-
-const props = defineProps({
-  grid: {
-    // 表格实例
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  scope: {
-    // 顶部插槽属性
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  moreColumnTitleArray: {
-    // 多表头数组
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  buildQueryCriterias: {
-    // 构建查询
-    type: Function,
-    default: () => {},
-  },
-  columns: {
-    // 表格列集合
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  url: {
-    // 表格所有的url
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-});
-const table = inject('table');
-
-const queryFormFieldsComputed = computed(() => {
-  localeFlag.value;
-  return fields.value;
-});
-const toolbarButtonsComputed = computed(() => {
-  localeFlag.value;
-  return buttons_.value;
-});
-const denseToolbarComputed = computed(() => {
-  if (table.denseToolbar) {
-    return true;
-  } else if (table.dense !== false) {
-    return true;
-  } else {
-    return false;
-  }
-});
-
-const screenCols = { xs: 1, sm: 2, md: 3, lg: 4, xl: 6 };
-const queryFormColsNumComputed = computed(() => {
-  if (typeof props.grid.props.queryFormColsNum === 'number' && props.grid.props.queryFormColsNum > 0) {
-    return props.grid.props.queryFormColsNum;
-  } else if (typeof props.grid.props.queryFormColsNum === 'object') {
-    const screen = { ...screenCols, ...props.grid.props.queryFormColsNum };
-    return screen[$q.screen.name];
-  }
-  return screenCols[$q.screen.name];
-});
-
-// 处理查询form显示的字段
-const handlerQueryFormShowField = () => {
-  fields.value = [];
-  if (moreQueryStatus.value) {
-    props.grid.props.queryFormFields.forEach((item: any) => {
-      fields.value.push(item);
-      item.showIf = () => {
-        return true;
-      };
-    });
-  } else {
-    // 一行应该显示的字段个数
-    const rowColsNum = queryFormColsNumComputed.value * (props.grid.props.queryFormRowNum || 1);
-    let currRowColsNum = 0;
-    props.grid.props.queryFormFields.forEach((item: any) => {
-      if (Tools.hasOwnProperty(item, 'colSpan')) {
-        currRowColsNum += item.colSpan;
-      } else {
-        currRowColsNum += 1;
-      }
-      if (currRowColsNum <= rowColsNum) {
-        fields.value.push(item);
-        item.showIf = (form) => {
-          return true;
-        };
-      } else {
-        item.showIf = (form) => {
-          return false;
-        };
-      }
-    });
-  }
-};
-
-const edit = (selected) => {
-  if (!selected) {
-    NotifyManager.warn(t('action.edit.tip'));
-  } else {
-    openEditor(t('action.edit'), formStatus.edit, selected);
-  }
-};
-
-const clone = (selected) => {
-  if (!selected) {
-    NotifyManager.warn(t('action.copy.tip'));
-  } else {
-    selected[props.grid.props.primaryKey] = undefined;
-    openEditor(t('action.copy'), formStatus.clone, selected);
-  }
-};
-
-const remove = () => {
-  const ids = <any>[];
-  const tickedRows = props.grid.getTickedRows();
-  const selectedRows = props.grid.getSelectedRows();
-  if (tickedRows?.length > 0) {
-    tickedRows.forEach((item) => {
-      ids.push(props.grid.props.localMode ? item['_rowKey_'] : item[props.grid.props.primaryKey]);
-    });
-  } else if (selectedRows?.length > 0) {
-    selectedRows.forEach((item) => {
-      ids.push(props.grid.props.localMode ? item['_rowKey_'] : item[props.grid.props.primaryKey]);
-    });
-  }
-  let flag = true;
-  props.grid.emit('beforeRemove', {
-    grid: props.grid,
-    ids: ids,
-    callback: (param: any) => {
-      if (param && Array.isArray(param)) {
-        ids.splice(0, ids.length - 1);
-        ids.push(...param);
-      } else {
-        flag = false;
-      }
-    },
-  });
-  if (flag) {
-    if (props.grid.props.localMode) {
-      props.grid.removeLocalData(ids);
-    } else {
-      let requestParams: any = {
-        method: 'DELETE',
-        url: props.url.removeDataUrl || props.url.dataUrl,
-        data: ids,
-      };
-      axios(requestParams)
-        .then((resp) => {
-          props.grid.emit('afterRemove', { grid: props.grid, ids: resp?.data });
-          NotifyManager.info(t('tip.operationSuccess'));
-          if (props.grid.props.refreshData || !props.grid.props.tree) {
-            props.grid.refresh();
-          } else {
-            props.grid.removeLocalData(resp?.data);
-          }
-        })
-        .catch((error) => {
-          console.error('[w-grid]Remove error：', error);
-        });
-    }
-  }
-};
-
-const getExportData = async () => {
-  let resultData = <any>[];
-  const reqParams: any = { pageable: false };
-  let urlSearchParams = props.buildQueryCriterias(reqParams);
-  const resp = await axios.get(props.url.fetchDataUrl || props.url.dataUrl, { params: urlSearchParams });
-  if (resp && resp.data) {
-    const responseData = resp.data;
-    if (Array.isArray(responseData)) {
-      resultData = responseData;
-    } else if (typeof responseData === 'object' && responseData.content) {
-      resultData = responseData.content;
-    }
-  }
-  return resultData;
-};
-
-const wrapCsvValue = (val, formatFn, row) => {
-  let formatted = formatFn !== void 0 ? formatFn(val, row) : val;
-  formatted = formatted === void 0 || formatted === null ? '' : String(formatted);
-  formatted = formatted.split('"').join('""');
-  /**
-   * Excel accepts \n and \r in strings, but some other CSV parsers do not
-   * Uncomment the next two lines to escape new lines
-   */
-  // .split('\n').join('\\n')
-  // .split('\r').join('\\r')
-  return `"${formatted}"`;
-};
-
-const resetDefaultValues = () => {
-  let requestParams: any = {
-    method: 'POST',
-    url: props.url.dataUrl + '/resetDefaultValues',
-  };
-  axios(requestParams)
-    .then((resp) => {
-      NotifyManager.info(t('tip.operationSuccess'));
-      props.grid.refresh();
-    })
-    .catch((error) => {
-      console.error('[w-grid]ResetDefaultValues error：', error);
-    });
-};
-
-const showLoading = (msg: string = '正在处理，请稍等...') => {
-  $q.loading.show({
-    message: msg,
-    boxClass: 'bg-grey-2 text-grey-9',
-    spinnerColor: 'primary',
-  });
-};
-const hideLoading = () => {
-  $q.loading.hide();
-};
-
-const openEditor = (title, status, data) => {
-  props.grid.getEditorDialog().show();
-  nextTick(() => {
-    props.grid.getEditorDialog().setTitle(title);
-    props.grid.getEditorForm().setStatus(status);
-    if (!Tools.isEmpty(data)) {
-      props.grid.getEditorForm().setData(data);
-    }
-  });
-};
-
-const buttonObj = reactive({
-  separator: 'separator',
-  query: {
-    name: 'query',
-    icon: 'search',
-    labelI18nKey: 'action.query',
-    label: t('action.query'),
-    click: () => {
-      props.grid.refresh();
-    },
-  },
-  moreQuery: {
-    name: 'moreQuery',
-    icon: 'zoom_in',
-    labelI18nKey: 'action.moreQueryConditions',
-    label: t('action.moreQueryConditions'),
-    enableIf: () => {
-      if (props.grid.props.queryFormFields.length <= fields.value.length && !moreQueryStatus.value) {
-        return false;
-      } else {
-        return true;
-      }
-    },
-    click: () => {
-      moreQueryStatus.value = !moreQueryStatus.value;
-      handlerQueryFormShowField();
-    },
-  },
-  reset: {
-    name: 'reset',
-    icon: 'restart_alt',
-    labelI18nKey: 'action.reset',
-    label: t('action.reset'),
-    click: () => {
-      formRef.value.reset();
-    },
-  },
-  refresh: {
-    name: 'refresh',
-    icon: 'loop',
-    labelI18nKey: 'action.refresh',
-    label: t('action.refresh'),
-    click: () => {
-      props.grid.refresh();
-    },
-  },
-  add: {
-    name: 'add',
-    icon: 'add',
-    labelI18nKey: 'action.addNew',
-    label: t('action.addNew'),
-    click: () => {
-      openEditor(t('action.addNew'), formStatus.add, undefined);
-    },
-    afterEditorOpen: () => {
-      props.grid.emit('afterEditorOpen', { grid: props.grid, data: undefined });
-    },
-  },
-  edit: {
-    name: 'edit',
-    icon: 'edit',
-    labelI18nKey: 'action.edit',
-    label: t('action.edit'),
-    enableIf: (args) => {
-      if (args.selected) {
-        return true;
-      }
-      return false;
-    },
-    click: (args) => {
-      edit(args.selected);
-    },
-    afterEditorOpen: (args) => {
-      props.grid.emit('afterEditorOpen', { grid: props.grid, data: args.selected });
-    },
-  },
-  inlineCellEdit: {
-    name: 'inlineCellEdit',
-    icon: 'border_color',
-    labelI18nKey: 'action.edit',
-    label: t('action.edit'),
-    enableIf: (args) => {
-      if (Object.keys(table.cellSelected).length > 0 && table.cellSelected['colName']) {
-        return true;
-      }
-      return false;
-    },
-    click: () => {
-      if (props.grid.props.selectMode !== selectMode.cell) {
-        console.warn('[w-grid]`selectMode` property is not `cell`, Cannot use cell editing function.');
-        return false;
-      } else if (Object.keys(table.cellSelected).length === 0 || !table.cellSelected['colName']) {
-        NotifyManager.info('请选择要编辑的单元格');
-        return false;
-      } else if (table.columns.findIndex((item) => item['name'] === table.cellSelected['colName'] && item['type']) < 0) {
-        console.warn('[w-grid]The column selected is not configured with a component type for editing.');
-        return false;
-      }
-      table.bodyEditStatus = editStatus.cell;
-    },
-  },
-  cellEdit: {
-    name: 'cellEdit',
-    icon: 'border_color',
-    labelI18nKey: 'action.edit',
-    label: t('action.edit'),
-    enableIf: (args) => {
-      if (Object.keys(table.cellSelected).length > 0 && table.cellSelected['colName']) {
-        return true;
-      }
-      return false;
-    },
-    click: () => {
-      if (props.grid.props.selectMode !== selectMode.cell) {
-        console.warn('[w-grid]`selectMode` property is not `cell`, Cannot use cell editing function.');
-        return false;
-      } else if (Object.keys(table.cellSelected).length === 0 || !table.cellSelected['colName']) {
-        NotifyManager.info('请选择要编辑的单元格');
-        return false;
-      } else if (table.columns.findIndex((item) => item['name'] === table.cellSelected['colName'] && item['type']) < 0) {
-        console.warn('[w-grid]The column selected is not configured with a component type for editing.');
-        return false;
-      }
-      // 弹出模态框编辑，但是只编辑该列的值
-      props.grid.getCellEditorDialog().show();
-    },
-  },
-  inlineRowEdit: {
-    name: 'inlineRowEdit',
-    icon: 'edit_note',
-    labelI18nKey: 'action.edit',
-    label: t('action.edit'),
-    enableIf: (args) => {
-      if (args.selected) {
-        return true;
-      }
-      return false;
-    },
-    click: () => {
-      if (table.columns.findIndex((item) => item['type']) < 0) {
-        console.warn('[w-grid]Not configured with a component type for editing.');
-        return false;
-      }
-      table.bodyEditStatus = editStatus.row;
-    },
-  },
-  inlineRowsEdit: {
-    name: 'inlineRowsEdit',
-    icon: 'app_registration',
-    labelI18nKey: 'action.edit',
-    label: t('action.edit'),
-    click: () => {
-      if (table.columns.findIndex((item) => item['type']) < 0) {
-        console.warn('[w-grid]Not configured with a component type for editing.');
-        return false;
-      }
-      table.bodyEditStatus = editStatus.rows;
-      // 清空勾选与选中
-      props.grid.clearSelected();
-      props.grid.clearTicked();
-      table.allTicked = false;
-    },
-  },
-  clone: {
-    name: 'clone',
-    icon: 'content_copy',
-    labelI18nKey: 'action.copy',
-    label: t('action.copy'),
-    enableIf: (args) => {
-      if (args.selected) {
-        return true;
-      }
-      return false;
-    },
-    click: () => {
-      clone(props.grid.getSelectedRow());
-    },
-    afterEditorOpen: (args) => {
-      props.grid.emit('afterEditorOpen', { grid: props.grid, data: args.selected });
-    },
-  },
-  remove: {
-    name: 'remove',
-    icon: 'delete',
-    labelI18nKey: 'action.remove',
-    label: t('action.remove'),
-    enableIf: (args) => {
-      if (args.ticked) {
-        return true;
-      } else if (args.selected) {
-        return true;
-      }
-      return false;
-    },
-    click: (tips: boolean = true) => {
-      if (!tips) {
-        remove();
-      } else {
-        $q.dialog({
-          title: t('confirm'),
-          message: t('action.remove.tip'),
-          cancel: { noCaps: true },
-          ok: { noCaps: true },
-          persistent: true,
-        }).onOk(() => {
-          remove();
-        });
-      }
-    },
-  },
-  view: {
-    name: 'view',
-    icon: 'visibility',
-    labelI18nKey: 'action.view',
-    label: t('action.view'),
-    enableIf: (args) => {
-      if (args.selected) {
-        return true;
-      }
-      return false;
-    },
-    click: () => {
-      props.grid.view();
-    },
-  },
-  export: {
-    name: 'export',
-    icon: 'file_download',
-    labelI18nKey: 'action.export',
-    label: t('action.export'),
-    click: async () => {
-      showLoading();
-      let exportData = props.grid.getRows();
-      // 判断是否配置了 url， 以不分页形式请求后端获取全部数据一把导出。
-      if (!Tools.isEmpty(props.grid.props.fetchDataUrl) || !Tools.isEmpty(props.grid.props.dataUrl)) {
-        const fetchResult = await getExportData();
-        if (fetchResult && fetchResult.length > 0) {
-          exportData = fetchResult;
-        }
-      }
-      const content = [props.columns.map((col) => wrapCsvValue(col.label))]
-        .concat(
-          exportData.map((row) =>
-            props.columns
-              .map((col) => wrapCsvValue(typeof col.field === 'function' ? col.field(row) : row[col.field === void 0 ? col.name : col.field], col.format, row))
-              .join(','),
-          ),
-        )
-        .join('\r\n');
-
-      const status = exportFile('table-export.csv', content, {
-        encoding: 'utf-8',
-        mimeType: 'text/csv',
-        byteOrderMark: '\uFEFF', // 解决乱码问题
-      });
-
-      if (status !== true) {
-        NotifyManager.error(t('action.export.failed'));
-      }
-      hideLoading();
-    },
-  },
-  addTop: {
-    name: 'addTop',
-    icon: 'add',
-    labelI18nKey: 'action.addTop',
-    label: t('action.addTop'),
-    click: () => {
-      openEditor(t('action.addTop'), formStatus.addTop, undefined);
-    },
-    afterEditorOpen: () => {
-      props.grid.emit('afterEditorOpen', { grid: props.grid, data: undefined });
-    },
-  },
-  addChild: {
-    name: 'addChild',
-    icon: 'playlist_add',
-    labelI18nKey: 'action.addChild',
-    label: t('action.addChild'),
-    enableIf: (args) => {
-      if (args.selected) {
-        return true;
-      }
-      return false;
-    },
-    click: () => {
-      openEditor(t('action.addChild'), formStatus.addChild, undefined);
-    },
-    afterEditorOpen: () => {
-      props.grid.emit('afterEditorOpen', { grid: props.grid, data: undefined });
-    },
-  },
-  expand: {
-    name: 'expand',
-    icon: () => {
-      return table.treeExpand ? 'expand_less' : 'expand_more';
-    },
-    label: () => {
-      return table.treeExpand ? t('action.collapseAll') : t('action.expandAll');
-    },
-    click: () => {
-      if (table.treeExpand) {
-        props.grid.collapse();
-      } else {
-        props.grid.expand();
-      }
-      table.treeExpand = !table.treeExpand;
-    },
-  },
-  resetDefaultValues: {
-    name: 'resetDefaultValues',
-    icon: 'bi-copy',
-    labelI18nKey: 'action.resetDefaultValues',
-    label: t('action.resetDefaultValues'),
-    click: (tips: boolean = true) => {
-      if (!tips) {
-        resetDefaultValues();
-      } else {
-        $q.dialog({
-          title: t('confirm'),
-          message: t('action.resetDefaultValues.tip'),
-          cancel: { noCaps: true },
-          ok: { noCaps: true },
-          persistent: true,
-        }).onOk(() => {
-          resetDefaultValues();
-        });
-      }
-    },
-  },
-});
-
-// 处理toobar
-const handleChildrenBtn = (arr, moreQueryShow) => {
-  const tempArr = <any>[];
-  for (let i = 0; i < arr.length; i++) {
-    const btn = arr[i];
-    if (typeof btn === 'string' && !buttonObj[btn]) {
-      throw new Error('[w-grid]`' + btn + '`' + ' toolbar action NOT exist.');
-    } else if (Array.isArray(btn) && btn.length > 0) {
-      const handleResult = handleChildrenBtn(btn, moreQueryShow);
-      if (handleResult && handleResult.length > 0) {
-        tempArr.push(handleResult);
-      }
-    } else if (typeof btn === 'string' && buttonObj[btn]) {
-      if (btn === buttonObj.query.name && i === 0) {
-        // 查询按钮为第一个时，追加更多查询时直接追加到查询按钮当前所在下标的后面一个，不能追加为数组，否则按钮组取第一个为 QBtnDropdown 左边按钮时取到的是一个数组，会报错。
-        // ['query', 'reset']
-        tempArr.push(buttonObj[btn]);
-        tempArr.push(buttonObj[buttonObj.moreQuery.name]);
-      } else if (btn === buttonObj.query.name) {
-        tempArr.push([buttonObj[btn], buttonObj[buttonObj.moreQuery.name]]);
-      } else {
-        tempArr.push(buttonObj[btn]);
-      }
-    } else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) {
-      let overrideClick = false;
-      if (btn.click) {
-        overrideClick = true;
-      }
-      tempArr.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click, overrideClick });
-    } else {
-      tempArr.push(btn);
-    }
-  }
-  return tempArr;
-};
-const handleToolbarActions = () => {
-  buttons_.value.splice(0, buttons_.value.length);
-  // 处理查询按钮，符合条件时给其追加更多查询按钮
-  let moreQueryShow = false;
-  const rowColsNum = queryFormColsNumComputed.value * (props.grid.props.queryFormRowNum || 1);
-  let currRowColsNum = 0;
-  let showQueryFormFieldNum = 0;
-  props.grid.props.queryFormFields.forEach((item: any) => {
-    if (Tools.hasOwnProperty(item, 'colSpan')) {
-      currRowColsNum += item.colSpan;
-    } else {
-      currRowColsNum += 1;
-    }
-    if (currRowColsNum <= rowColsNum) {
-      showQueryFormFieldNum += 1;
-    }
-  });
-  if (showQueryFormFieldNum < props.grid.props.queryFormFields.length) {
-    moreQueryShow = true;
-  }
-  props.grid.props.toolbarActions.forEach((btn: any, index) => {
-    if (typeof btn === 'string' && !buttonObj[btn]) {
-      throw new Error('[w-grid]`' + btn + '`' + ' toolbar action NOT exist.');
-    } else if (typeof btn === 'string' && buttonObj[btn]) {
-      if (btn === buttonObj.query.name && moreQueryShow) {
-        buttons_.value.push([buttonObj[btn], buttonObj[buttonObj.moreQuery.name]]);
-      } else {
-        buttons_.value.push(buttonObj[btn]);
-      }
-    } else if (Array.isArray(btn) && btn.length > 0) {
-      buttons_.value.push(handleChildrenBtn(btn, moreQueryShow));
-    } else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) {
-      // 继承内置按钮
-      let overrideClick = false;
-      if (btn.click) {
-        overrideClick = true;
-      }
-      buttons_.value.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click, overrideClick: overrideClick });
-    } else {
-      buttons_.value.push(btn);
-    }
-  });
-  if (buttons_.value.length > 0 && buttons_.value[buttons_.value.length - 1] !== 'separator' && props.grid.props.configButton) {
-    buttons_.value.push(buttonObj.separator);
-  }
-};
-
-const setLocaleFlag = () => {
-  localeFlag.value = !localeFlag.value;
-};
-const resetLabel = () => {
-  Object.keys(buttonObj).forEach((btn) => {
-    if (typeof buttonObj[btn] === 'object' && buttonObj[btn].labelI18nKey) {
-      buttonObj[btn].label = t(buttonObj[btn].labelI18nKey);
-    }
-  });
-};
-
-const buttonClick = (arr) => {
-  arr.forEach((button) => {
-    if (typeof button === 'object' && !Tools.isEmpty(button.click) && props.grid.props.dbClickOperation === button.name) {
-      toolbarRef.value.buttonClick(button);
-    } else if (Array.isArray(button) && button.length > 0) {
-      buttonClick(button);
-    }
-  });
-};
-const dbClickOperation = (row) => {
-  if (!Tools.isEmpty(row) && props.grid.props.dbClickOperation === buttonObj.expand.name) {
-    row['expand'] = Tools.isEmpty(row['expand']) ? true : !row['expand'];
-  } else {
-    if (!buttonObj[props.grid.props.dbClickOperation] && checkConfigNotContains(buttons_.value)) {
-      throw new Error('[w-grid]`' + props.grid.props.dbClickOperation + '`' + ' toolbar action NOT exist.');
-    } else if (
-      props.grid.props.dbClickOperation !== buttonObj.separator &&
-      buttonObj[props.grid.props.dbClickOperation] &&
-      checkConfigNotContains(buttons_.value)
-    ) {
-      // 双击时配置的dbClickOperation不在用户配置的按钮集中，直接调用内置按钮
-      toolbarRef.value.buttonClick(buttonObj[props.grid.props.dbClickOperation]);
-    } else {
-      buttonClick(buttons_.value);
-    }
-  }
-};
-// 检查用户配置的按钮中是否不包含固定名字的按钮
-const checkConfigNotContains = (arr) => {
-  let flag = true;
-  for (let i = 0; i < arr.length; i++) {
-    if (typeof arr[i] === 'object' && props.grid.props.dbClickOperation === arr[i]['name']) {
-      flag = false;
-      break;
-    } else if (Array.isArray(arr[i]) && arr[i].length > 0) {
-      const tempFlag = checkConfigNotContains(arr[i]);
-      flag = tempFlag;
-    }
-  }
-  return flag;
-};
-const getQueryForm = () => {
-  return formRef.value;
-};
-
-onBeforeMount(() => {
-  handleToolbarActions();
-});
-
-defineExpose({
-  setLocaleFlag,
-  handlerQueryFormShowField,
-  handleToolbarActions,
-  resetLabel,
-  dbClickOperation,
-  getQueryForm,
-  reset: buttonObj.reset.click,
-  add: buttonObj.add.click,
-  edit,
-  cellEdit: buttonObj.cellEdit.click,
-  inlineCellEdit: buttonObj.inlineCellEdit.click,
-  inlineRowEdit: buttonObj.inlineRowEdit.click,
-  inlineRowsEdit: buttonObj.inlineRowsEdit.click,
-  clone: buttonObj.clone.click,
-  remove: buttonObj.remove.click,
-  view: buttonObj.view.click,
-  export: buttonObj.export.click,
-  addTop: buttonObj.addTop.click,
-  addChild: buttonObj.addChild.click,
-  expand: buttonObj.expand.click,
-  resetDefaultValues: buttonObj.resetDefaultValues.click,
-});
-</script>
-
-<style lang="css"></style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridView.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridView.vue
deleted file mode 100644
index 9aa02971..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridView.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <w-drawer ref="drawerRef" :title="$t('action.view')" v-bind="props.grid.props.viewer.drawer">
-    <div class="p-2.5">
-      <w-info-panel ref="infoRef" v-bind="props.grid.props.viewer.panel" :info="infoArray"></w-info-panel>
-    </div>
-  </w-drawer>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-import { t, Tools, NotifyManager } from '@/platform';
-
-const drawerRef = ref();
-const infoRef = ref();
-
-const props = defineProps({
-  grid: {
-    // 表格实例
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  tableColumnsMap: {
-    type: Map,
-    default: () => {
-      return new Map();
-    },
-  },
-});
-
-const infoArray = ref(<any>[]);
-
-const view = () => {
-  const selected = props.grid.getSelectedRow();
-  if (!selected) {
-    NotifyManager.warn(t('action.view.tip'));
-  } else {
-    infoArray.value = [];
-    if (props.grid.props.viewer.panel.fields && props.grid.props.viewer.panel.fields.length > 0) {
-      for (let item of props.grid.props.viewer.panel.fields) {
-        if (item.format) {
-          let value = selected[item.name];
-          try {
-            value = item.format(selected[item.name], selected[0]);
-          } catch (error) {
-            console.error('format error!');
-          }
-          infoArray.value.push({ label: item.label, value: value, originalValue: selected[item.name] });
-        } else {
-          let value = null;
-          if (props.tableColumnsMap.get(item.name) && !Tools.isEmpty(props.tableColumnsMap.get(item.name).format)) {
-            value = selected[item.name];
-            try {
-              value = props.tableColumnsMap.get(item.name).format(selected[item.name], selected);
-            } catch (error) {
-              console.error('format error!');
-            }
-          } else {
-            value = selected[item.name];
-          }
-          infoArray.value.push({ label: item.label, value: value, originalValue: selected[item.name] });
-        }
-      }
-    } else {
-      for (let item of props.tableColumnsMap) {
-        if (item[1].format) {
-          let value = selected[item[0]];
-          try {
-            value = item[1].format(selected[item[0]], selected);
-          } catch (error) {
-            console.error('format error!');
-          }
-          infoArray.value.push({ label: item[1].label, value: value, originalValue: selected[item.name] });
-        } else {
-          infoArray.value.push({
-            label: item[1].label,
-            value: selected[item[0]],
-            originalValue: selected[item.name],
-          });
-        }
-      }
-    }
-    drawerRef.value.show();
-  }
-};
-
-const getViewerDrawer = () => {
-  return drawerRef.value;
-};
-const getInfoPanel = () => {
-  return infoRef.value;
-};
-
-defineExpose({
-  getViewerDrawer,
-  getInfoPanel,
-  view,
-});
-</script>
-<style lang="css"></style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridHeader.vue b/io.sc.platform.core.frontend/src/platform/components/grid/Header.vue
similarity index 75%
rename from io.sc.platform.core.frontend/src/platform/components/grid/GridHeader.vue
rename to io.sc.platform.core.frontend/src/platform/components/grid/Header.vue
index 9b935785..332b38f7 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridHeader.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/Header.vue
@@ -1,24 +1,22 @@
 <template>
   <template v-if="columnTitleState.columnTitleRowNum > 1">
+    <!-- 多表头 -->
     <q-tr v-for="(r, rIndex) in columnTitleState.columnTitleArr" :key="rIndex">
       <q-th
-        v-if="
-          rIndex === 0 && props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none
-        "
+        v-if="rIndex === 0 && tools.table.configStore.useCheckboxSelection && !tools.props.tree && tools.props.selectMode !== Constant.SELECT_MODE.NONE"
         :rowspan="columnTitleState.columnTitleRowNum"
         :style="moreColumnTitleTableSelectionStyle"
         class="firstColumn"
       >
-        <q-checkbox v-model="table.allTicked" flat :dense="props.denseHeader" @update:model-value="allTickedUpdateFun" />
+        <q-checkbox
+          v-model="tools.table.store.headerTicked"
+          flat
+          :dense="tools.cm.denseHeader.value"
+          @update:model-value="tools.em.updateTickeds(tools.table.store.headerTicked)"
+        />
       </q-th>
       <q-th
-        v-else-if="rIndex === 0 && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none"
-        :rowspan="columnTitleState.columnTitleRowNum"
-        :style="moreColumnTitleTableSelectionStyle"
-        class="firstColumn"
-      ></q-th>
-      <q-th
-        v-if="rIndex === 0 && table.sortNo && !props.grid.props.tree"
+        v-if="rIndex === 0 && tools.table.configStore.showSortNo && !tools.props.tree"
         :rowspan="columnTitleState.columnTitleRowNum"
         :style="moreColumnTitleTableSortNoStyle"
         :class="rowNumIsFirstColumnComputed ? 'firstColumn' : ''"
@@ -39,24 +37,25 @@
         <span v-dompurify-html="Tools.isUndefinedOrNull(c.label) ? '' : c.label"></span>
       </q-th>
     </q-tr>
-    <q-tr v-if="table.rows.length === 0" :style="props.noDataTrHeightStyle" class="noDataTr">
-      <q-td :colspan="props.noDataTrColspan" align="center" valian="middle" style="border-bottom-width: 0px"
+    <q-tr v-if="tools.table.rows.length === 0" :style="tools.cm.noDataStyle.value" class="noDataTr">
+      <q-td :colspan="tools.cm.displayColumnNum.value" align="center" valian="middle" style="border-bottom-width: 0px"
         ><q-icon size="2em" name="info" />{{ $t('tip.noData') }}</q-td
       >
     </q-tr>
   </template>
   <template v-else>
+    <!-- 常规表头 -->
     <q-tr :props="scope">
       <q-th
-        v-if="props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none"
-        :style="props.grid.props.tree ? '' : 'padding: 0; min-width: 50px;width: 50px;max-width:50px'"
+        v-if="tools.table.configStore.useCheckboxSelection && !tools.props.tree && tools.props.selectMode !== Constant.SELECT_MODE.NONE"
+        :style="tools.props.tree ? '' : 'padding: 0; min-width: 50px;width: 50px;max-width:50px'"
       >
-        <q-checkbox v-model="table.allTicked" flat :dense="props.denseHeader" @update:model-value="allTickedUpdateFun"
+        <q-checkbox
+          v-model="tools.table.store.headerTicked"
+          flat
+          :dense="tools.cm.denseHeader.value"
+          @update:model-value="tools.em.updateTickeds(tools.table.store.headerTicked)"
       /></q-th>
-      <q-th
-        v-else-if="table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none"
-        :style="props.grid.props.tree ? '' : 'padding: 0; min-width: 50px;width: 50px;max-width:50px'"
-      ></q-th>
       <template v-for="col in scope.cols" :key="col.name">
         <q-th
           :props="scope"
@@ -69,26 +68,20 @@
         </q-th>
       </template>
     </q-tr>
-    <q-tr v-if="table.rows.length === 0" :style="props.noDataTrHeightStyle" class="noDataTr">
-      <q-td :colspan="props.noDataTrColspan" align="center" valian="middle" style="border-bottom-width: 0px"
-        ><q-icon size="2em" name="info" />{{ $t('tip.noData') }}</q-td
+    <q-tr v-if="tools.table.rows.length === 0" :style="tools.cm.noDataStyle.value" class="noDataTr">
+      <q-td :colspan="tools.cm.displayColumnNum.value" align="center" valian="middle" style="border-bottom-width: 0px"
+        ><q-icon size="2em" name="info" />{{ $t(tools.table.store.noDataLabelI18nKey) }}</q-td
       >
     </q-tr>
   </template>
 </template>
 <script setup lang="ts">
-import { Tools } from '@/platform';
+import { Tools, $t } from '@/platform';
 import { computed, inject, reactive } from 'vue';
-import { selectMode } from './ts/grid.ts';
+import { Constant, GridTools } from './ts/index';
 
+const tools = <GridTools>inject('tools');
 const props = defineProps({
-  grid: {
-    // 表格实例
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
   scope: {
     // 顶部插槽属性
     type: Object,
@@ -96,46 +89,7 @@ const props = defineProps({
       return {};
     },
   },
-  selection: {
-    type: String,
-    default: '',
-  },
-  denseHeader: {
-    type: Boolean,
-    default: false,
-  },
-  rawColumns: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  tableColumns: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  excludeColumnNum: {
-    type: Number,
-    default: () => {
-      return 0;
-    },
-  },
-  noDataTrHeightStyle: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  noDataTrColspan: {
-    type: Number,
-    default: () => {
-      return 0;
-    },
-  },
 });
-const table = inject('table');
 
 // 多行列标题相关变量
 const columnTitleState = reactive({
@@ -161,8 +115,8 @@ let moreColumnTitleMap = new Map<string, MoreColumnTitleType>();
 let allColumnMap = new Map();
 
 const moreColumnTitleTableSelectionStyle = computed(() => {
-  if (table.stickyNum > 0) {
-    if (props.grid.props.tree) {
+  if (tools.table.configStore.stickyNum > 0) {
+    if (tools.props.tree) {
       return 'z-index: 3;position: sticky;left: 0px;';
     } else {
       return 'z-index: 3;position: sticky;left: 0px;padding: 0; width: 50px;min-width:50px;max-width:50px;';
@@ -172,31 +126,27 @@ const moreColumnTitleTableSelectionStyle = computed(() => {
 });
 
 const moreColumnTitleTableSortNoStyle = computed(() => {
-  if (table.checkboxSelection && table.sortNo && table.stickyNum > 0) {
+  if (tools.table.configStore.useCheckboxSelection && tools.table.configStore.showSortNo && tools.table.configStore.stickyNum > 0) {
     return 'font-weight: bold;z-index: 3;position: sticky;left: var(--columnWidth-1-1);width: 50px;min-width:50px;max-width:50px;';
-  } else if (table.sortNo && table.stickyNum > 0) {
+  } else if (tools.table.configStore.showSortNo && tools.table.configStore.stickyNum > 0) {
     return 'font-weight: bold;z-index: 3;position: sticky;left: 0px;width: 50px;min-width:50px;max-width:50px;';
   }
   return 'font-weight: bold;width: 50px;min-width:50px;max-width:50px;';
 });
 
 const rowNumIsFirstColumnComputed = computed(() => {
-  if (props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none) {
-    return false;
-  } else if (table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none) {
+  if (tools.table.configStore.useCheckboxSelection && !tools.props.tree && tools.props.selectMode !== Constant.SELECT_MODE.NONE) {
     return false;
-  } else if (table.sortNo && !props.grid.props.tree) {
+  } else if (tools.table.configStore.showSortNo && !tools.props.tree) {
     return true;
   } else {
     return false;
   }
 });
 const isFirstColumn = (c, cIndex) => {
-  if (props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none) {
-    return '';
-  } else if (table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none) {
+  if (tools.table.configStore.useCheckboxSelection && !tools.props.tree && tools.props.selectMode !== Constant.SELECT_MODE.NONE) {
     return '';
-  } else if (table.sortNo && !props.grid.props.tree) {
+  } else if (tools.table.configStore.showSortNo && !tools.props.tree) {
     return '';
   } else if (isFirstHandle(c)) {
     return 'firstColumn';
@@ -206,7 +156,7 @@ const isFirstColumn = (c, cIndex) => {
 };
 const isFirstHandle = (c) => {
   let isFirst = false;
-  const firstColumn = props.rawColumns[0];
+  const firstColumn = tools.table.originalColumns[0];
   if (firstColumn?.name === c['name']) {
     isFirst = true;
   } else if (firstColumn?.columns?.length > 0) {
@@ -226,27 +176,6 @@ const child = (arr, c) => {
   return isExist;
 };
 
-const allTickedUpdateFun = (value, evt) => {
-  if (table.bodyEditStatus === 'none') {
-    if (value) {
-      table.rows.forEach((item) => {
-        item[table.tickedField] = true;
-        item[table.selectedField] = true;
-      });
-    } else {
-      table.rows.forEach((item) => {
-        item[table.tickedField] = false;
-        item[table.selectedField] = false;
-      });
-    }
-  } else if (table.bodyEditStatus === 'rowEdit' || table.bodyEditStatus === 'cellEdit') {
-    table.allTicked = null;
-  } else if (table.bodyEditStatus === 'rowsEdit') {
-    table.allTicked = false;
-  }
-  props.grid.emit('updateTickeds', { grid: props.grid, value: value });
-};
-
 const handlerStickyChildrenColumn = (item, columns) => {
   columns.push(item);
   if (item.columns && item.columns.length > 0) {
@@ -257,8 +186,8 @@ const handlerStickyChildrenColumn = (item, columns) => {
 };
 
 const getStickyColumn = () => {
-  const columns = props.rawColumns.filter((item, index) => {
-    return index < table.stickyNum;
+  const columns = tools.table.originalColumns.filter((item, index) => {
+    return index < tools.table.configStore.stickyNum;
   });
   const arr = [];
   columns.forEach((item) => {
@@ -323,7 +252,7 @@ const thStyleHandler = (c: any, scope: any) => {
   }
   const stickyColumnArr = getStickyColumn();
   if (
-    table.stickyNum > 0 &&
+    tools.table.configStore.stickyNum > 0 &&
     stickyColumnArr.findIndex((item: any) => {
       return item.name === c.name;
     }) > -1
@@ -343,7 +272,7 @@ const thStyleHandler = (c: any, scope: any) => {
               c.parents.every((_b) => tdArr[td].parents.some((_a) => _a === _b));
             if (result) {
               if (tr === 0) {
-                stickyThArr.push({ trIndex: tr + 1, tdIndex: td + props.excludeColumnNum + 1 });
+                stickyThArr.push({ trIndex: tr + 1, tdIndex: td + tools.cm.extColumnNum.value + 1 });
               } else {
                 stickyThArr.push({ trIndex: tr + 1, tdIndex: td + 1 });
               }
@@ -374,9 +303,9 @@ const thStyleHandler = (c: any, scope: any) => {
                 return item === parent;
               }) > -1
             ) {
-              stickyThArr.push({ trIndex: parentTrtdIndex.trIndex, tdIndex: td + props.excludeColumnNum + 1 });
+              stickyThArr.push({ trIndex: parentTrtdIndex.trIndex, tdIndex: td + tools.cm.extColumnNum.value + 1 });
             } else {
-              stickyThArr.push({ trIndex: parentTrtdIndex.trIndex, tdIndex: td + props.excludeColumnNum + 1 });
+              stickyThArr.push({ trIndex: parentTrtdIndex.trIndex, tdIndex: td + tools.cm.extColumnNum.value + 1 });
             }
           }
         }
@@ -386,13 +315,13 @@ const thStyleHandler = (c: any, scope: any) => {
       }
     } else {
       if (trtdIndex.tdIndex === 1) {
-        if (props.excludeColumnNum === 2) {
+        if (tools.cm.extColumnNum.value === 2) {
           return thStickyLastNameComputed.value.findIndex((item) => {
             return item.name === c.name;
           }) > -1
             ? (style += 'z-index: 3;position: sticky;left: calc(var(--columnWidth-1-1) + var(--columnWidth-1-2));')
             : (style += 'z-index: 3;position: sticky;left: calc(var(--columnWidth-1-1) + var(--columnWidth-1-2));');
-        } else if (props.excludeColumnNum === 1) {
+        } else if (tools.cm.extColumnNum.value === 1) {
           return thStickyLastNameComputed.value.findIndex((item) => {
             return item.name === c.name;
           }) > -1
@@ -407,14 +336,14 @@ const thStyleHandler = (c: any, scope: any) => {
         }
       } else {
         for (let i = 1; i < trtdIndex.tdIndex; i++) {
-          stickyThArr.push({ trIndex: 1, tdIndex: i + props.excludeColumnNum });
+          stickyThArr.push({ trIndex: 1, tdIndex: i + tools.cm.extColumnNum.value });
         }
       }
     }
-    if (props.excludeColumnNum === 2) {
+    if (tools.cm.extColumnNum.value === 2) {
       stickyThArr.push({ trIndex: 1, tdIndex: 1 });
       stickyThArr.push({ trIndex: 1, tdIndex: 2 });
-    } else if (props.excludeColumnNum === 1) {
+    } else if (tools.cm.extColumnNum.value === 1) {
       stickyThArr.push({ trIndex: 1, tdIndex: 1 });
     }
     if (stickyThArr && stickyThArr.length > 0) {
@@ -427,15 +356,15 @@ const thStyleHandler = (c: any, scope: any) => {
       }
     }
   }
-  if (c['name'] === table.columns[table.columns.length - 1]['name']) {
+  if (c['name'] === tools.table.columns[tools.table.columns.length - 1]['name']) {
     style += 'border-right-width: 0px;';
   }
   return style;
 };
 
 const titleScopeHandler = (column: any, scope: any) => {
-  if (props.tableColumns?.length > 0) {
-    const i = props.tableColumns.findIndex((item: any) => item['name'] === column.name);
+  if (tools.table.columns?.length > 0) {
+    const i = tools.table.columns.findIndex((item: any) => item['name'] === column.name);
     if (i > -1) {
       return scope;
     }
@@ -521,7 +450,7 @@ function findParents(arrData: any, name: any) {
 const handlerMoreRowColumnTitle = () => {
   moreColumnTitleMap = new Map<string, MoreColumnTitleType>();
   allColumnMap = new Map();
-  props.rawColumns.forEach((tableColumn: any) => {
+  tools.table.originalColumns.forEach((tableColumn: any) => {
     columnToMap(tableColumn);
   });
   let maxColumnChildrenLevel = 0;
@@ -541,7 +470,7 @@ const handlerMoreRowColumnTitle = () => {
     tmpColspan = 0;
 
     // 处理列的 parent
-    const parent = findParents(props.rawColumns, key);
+    const parent = findParents(tools.table.originalColumns, key);
     moreColumnTitleMap.get(key)!.parents = parent;
 
     // 处理列的 parentLevel
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/Pagination.vue b/io.sc.platform.core.frontend/src/platform/components/grid/Pagination.vue
new file mode 100644
index 00000000..3594c71f
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/Pagination.vue
@@ -0,0 +1,41 @@
+<template>
+  <template v-if="tools.props.pageable && !tools.props.tree">
+    <q-pagination
+      v-model="page"
+      :boundary-links="tools.table.store.pagination.config.boundaryLinks"
+      :boundary-numbers="tools.table.store.pagination.config.boundaryNumbers"
+      :direction-links="tools.table.store.pagination.config.directionLinks"
+      :ellipses="tools.table.store.pagination.config.ellipses"
+      :max-pages="tools.table.store.location.middleWidth > 600 ? tools.table.store.pagination.config.maxPages : 3"
+      :min="1"
+      :max="props.scope.pagesNumber"
+      :size="tools.cm.denseBottom.value ? '10px' : ''"
+      @update:model-value="pageChange"
+    />
+    <span>{{ $t('tip.pagenation.totalRecord', { count: tools.table.store.pagination.rowsNumber }) }}</span>
+  </template>
+  <template v-else> {{ $t('tip.pagenation.totalRecord', { count: tools.table.store.pagination.rowsNumber }) }} </template>
+</template>
+<script setup lang="ts">
+import { inject } from 'vue';
+import { $t } from '@/platform';
+import type { GridTools } from './ts/index';
+
+const tools = <GridTools>inject('tools');
+const page = defineModel({ type: Number, default: 1 });
+const props = defineProps({
+  scope: {
+    // 顶部插槽属性
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+const pageChange = (value) => {
+  tools.reqApiFM.fetchData({ pagination: tools.table.store.pagination });
+  page.value = value;
+};
+</script>
+<style lang="css"></style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/Td.vue b/io.sc.platform.core.frontend/src/platform/components/grid/Td.vue
new file mode 100644
index 00000000..cdab5269
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/Td.vue
@@ -0,0 +1,200 @@
+<template>
+  <template v-if="generateTdIfComputed">
+    <q-td
+      ref="tdRef"
+      :key="props.col.name"
+      :props="props.scope"
+      :class="tdClassComputed"
+      :style="tdStyleComputed"
+      :title="titleComputed"
+      :rowspan="rowSpanComputed"
+      @click="tdClick"
+    >
+      <!-- 前端排序号 -->
+      <template v-if="props.col.name === Constant.FIELD_NAMES.SORT_NO">
+        {{ props.scope.rowIndex + 1 }}
+      </template>
+
+      <!-- 树表格第一列 -->
+      <template v-else-if="isTreeGridAndFirstTdComputed">
+        <TreeGridFirstTdContent
+          ref="treeGridFirstTdRef"
+          :value="props.col.value"
+          :row="props.scope.row"
+          :col="props.col"
+          :level="props.level"
+        ></TreeGridFirstTdContent>
+      </template>
+
+      <!-- 内联编辑模式组件 -->
+      <template v-else-if="showInlineEditComponentComputed">
+        <InlineEditComponent :col="props.col" :row="props.scope.row"></InlineEditComponent>
+      </template>
+
+      <!-- 普通单元格内容 -->
+      <TdContent v-else :value="props.col.value"></TdContent>
+    </q-td>
+  </template>
+</template>
+<script setup lang="ts">
+import { computed, inject, onMounted, ref, toRaw } from 'vue';
+import { Tools } from '@/platform';
+import TdContent from './TdContent.vue';
+import TreeGridFirstTdContent from './TreeGridFirstTdContent.vue';
+import InlineEditComponent from './extra/inline-edit/InlineEditComponent.vue';
+import { Constant, GridTools } from './ts/index';
+
+const tools = <GridTools>inject('tools');
+const tdRef = ref();
+const treeGridFirstTdRef = ref();
+const tdWidth = ref(0);
+const props = defineProps({
+  level: { type: Number, default: 0 },
+  col: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  scope: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+const rowKey = Constant.FIELD_NAMES.ROW_KEY;
+
+const titleComputed = computed(() => {
+  if (tools.table.columns.length > 0) {
+    const column = tools.table.columns.find((item) => item['name'] === props.col.name);
+    if (column && column['title'] && typeof column['title'] === 'function') {
+      return column.title({ grid: tools.instance, row: toRaw(props.scope.row), value: props.scope.row[props.col.name] });
+    } else if (column && column['title']) {
+      return column['title'];
+    }
+  }
+  if (props.col.classes?.indexOf('truncate') > -1 && !Tools.isEmpty(props.col.value) && typeof props.col.value !== 'object') {
+    return props.col.value;
+  }
+  return '';
+});
+const tdClassComputed = computed(() => {
+  const tdClass = <any>[];
+  if (props.col.name === Constant.FIELD_NAMES.SORT_NO) {
+    tdClass.push('sortNo_td');
+  }
+  if (tools.props.selectMode === Constant.SELECT_MODE.CELL) {
+    tdClass.push('cellHover');
+  }
+  if (
+    tools.table.store.cellSelected &&
+    tools.table.store.cellSelected.colName === props.col['name'] &&
+    tools.table.store.cellSelected.rowKey === props.scope.row[rowKey]
+  ) {
+    tdClass.push('cellSelected');
+  }
+  return tdClass;
+});
+const tdStyleComputed = computed(() => {
+  let style = {};
+  if (tools.editFM.getEditorFieldByName(props.col['name']) && tools.table.store.inlineEditStatus !== Constant.EDIT_STATUS.NONE) {
+    style['width'] = tdWidth.value - 10 + 'px';
+  }
+  return style;
+});
+const isTreeGridAndFirstTdComputed = computed(() => {
+  return tools.props.tree && props.col.name === props.scope.cols[0].name;
+});
+const showInlineEditComponentComputed = computed(() => {
+  return tools.table.store.inlineEditStatus !== Constant.EDIT_STATUS.NONE && tools.editFM.isShowInlineEditor(props.col, props.scope.row[rowKey]);
+});
+const rowSpanComputed = computed(() => {
+  if (Object.keys(tools.table.store.mergeGroupRecords).length > 0) {
+    const column = tools.table.store.mergeGroupRecords[props.col['name']];
+    if (column && column[props.scope['row'][props.col['name']]].length > 1) {
+      return column[props.scope['row'][props.col['name']]].length;
+    }
+  }
+  return 1;
+});
+const generateTdIfComputed = computed(() => {
+  if (Object.keys(tools.table.store.mergeGroupRecords).length > 0) {
+    const colName = props.col['name'];
+    const column = tools.table.store.mergeGroupRecords[colName];
+    if (colName === Constant.FIELD_NAMES.SORT_NO) {
+      return true;
+    } else if (column && column[props.scope['row'][colName]].length > 1) {
+      return props.scope['row'][rowKey] === column[props.scope['row'][colName]][0];
+    }
+  }
+  return true;
+});
+
+const mergeGroupByFieldContainsIf = (fieldName: string) => {
+  const mergeGroupByField = tools.cm.mergeGroupByField.value;
+  if (Array.isArray(mergeGroupByField) && mergeGroupByField.length > 0) {
+    const index = mergeGroupByField.findIndex((item) => item === fieldName);
+    if (index > -1) {
+      return true;
+    }
+  }
+  return false;
+};
+const sortByContainsIf = (fieldName: string) => {
+  if (tools.props.sortBy && tools.props.sortBy.length > 0) {
+    const findResult = tools.props.sortBy.findIndex((item) => {
+      if (item.startsWith('-') && item.substring(1) === fieldName) {
+        return true;
+      }
+      return item === fieldName;
+    });
+    return findResult > -1;
+  }
+  return false;
+};
+
+const tdClick = () => {
+  // 判定是否要退出编辑模式
+  const cellSelected = tools.table.store.cellSelected;
+  if (cellSelected) {
+    if (tools.props.localMode && tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL && tools.props.selectMode === Constant.SELECT_MODE.CELL) {
+      if (cellSelected.colName !== props.col['name'] || cellSelected.row[rowKey] !== props.scope.row[rowKey]) {
+        tools.editFM.exitInlineEdit();
+      }
+    } else if (
+      tools.props.localMode &&
+      tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW &&
+      tools.props.selectMode === Constant.SELECT_MODE.CELL
+    ) {
+      if (cellSelected.row[rowKey] !== props.scope.row[rowKey]) {
+        tools.editFM.exitInlineEdit();
+      }
+    }
+  }
+  if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.NONE && tools.props.selectMode === Constant.SELECT_MODE.CELL) {
+    tools.table.store.cellSelected = {
+      row: toRaw(props.scope.row),
+      rowKey: props.scope.row[rowKey],
+      primaryKey: props.scope.row[tools.props.primaryKey],
+      colName: props.col['name'],
+      value: props.scope.row[props.col['name']],
+    };
+  }
+};
+
+onMounted(() => {
+  if (tdRef.value?.$el) {
+    tdWidth.value = tdRef.value.$el.clientWidth;
+  }
+});
+</script>
+
+<style lang="css">
+.sortNo_td {
+  padding: 0;
+  width: 50px;
+  min-width: 50px;
+  max-width: 50px;
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridAppendContent.vue b/io.sc.platform.core.frontend/src/platform/components/grid/TdContent.vue
similarity index 84%
rename from io.sc.platform.core.frontend/src/platform/components/grid/GridAppendContent.vue
rename to io.sc.platform.core.frontend/src/platform/components/grid/TdContent.vue
index db8867db..74ffe81d 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridAppendContent.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/TdContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <template v-if="typeof value === 'object' && value.componentType">
+  <template v-if="value && typeof value === 'object' && value.componentType">
     <component :is="value.componentType" v-bind="value.attrs"></component>
   </template>
   <template v-else>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/Top.vue b/io.sc.platform.core.frontend/src/platform/components/grid/Top.vue
new file mode 100644
index 00000000..0b13bea3
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/Top.vue
@@ -0,0 +1,287 @@
+<template>
+  <div class="col">
+    <template v-if="tools.table.advancedQueryStatus">
+      <!-- 高级查询 -->
+      <AdvancedQuery ref="formRef"></AdvancedQuery>
+    </template>
+    <template v-else>
+      <!-- 普通查询form -->
+      <w-form ref="formRef" v-bind="tools.props.queryFormAttrs" :fields="queryFormFieldsComputed" :cols-num="tools.props.queryFormColsNum"></w-form>
+    </template>
+
+    <!-- 标题与按钮 -->
+    <div
+      v-if="tools.props.title || buttons_.length > 0 || tools.props.configButton || tools.table.queryFormDisplayFields.length > 0"
+      class="flex flex-nowrap items-end"
+      :class="tools.table.queryFormDisplayFields.length > 0 ? 'pt-2.5' : ''"
+    >
+      <!-- 标题 -->
+      <div class="flex-none">{{ $t(tools.props.title ? tools.props.title : '') }}</div>
+
+      <!-- 按钮 -->
+      <div class="flex-1">
+        <w-toolbar ref="toolbarRef" v-bind="tools.props.toolbarConfigure" v-model="buttons_" :dense="denseToolbarComputed" :grid="tools.instance"></w-toolbar>
+      </div>
+
+      <!-- 最右侧用户配置按钮 -->
+      <div v-if="tools.props.configButton" class="flex-none pl-1">
+        <q-btn round dense :size="denseToolbarComputed ? '13px' : undefined" icon="manage_accounts" unelevated outline>
+          <q-popup-proxy v-model="tools.table.configStore.showConfigPanel">
+            <ConfigPanel :scope="props.scope" :grid="tools.instance"></ConfigPanel>
+          </q-popup-proxy>
+        </q-btn>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, inject, ref, onBeforeMount } from 'vue';
+import { useQuasar } from 'quasar';
+import { Tools, $t } from '@/platform';
+import ConfigPanel from './extra/config/ConfigPanel.vue';
+import AdvancedQuery from './extra/advanced-query/AdvancedQuery.vue';
+import { Constant, GridTools } from './ts/index';
+
+const $q = useQuasar();
+
+const tools = <GridTools>inject('tools');
+const formRef = ref();
+const toolbarRef = ref();
+const localeFlag = ref(false);
+const buttons_ = ref(<any>[]);
+
+const props = defineProps({
+  scope: {
+    // 顶部插槽属性
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+const buttons = tools.bm.getButtonConfig();
+
+const queryFormFieldsComputed = computed(() => {
+  if (localeFlag.value) {
+    return tools.table.queryFormDisplayFields;
+  }
+  return tools.table.queryFormDisplayFields;
+});
+const denseToolbarComputed = computed(() => {
+  if (tools.table.configStore.denseToolbar) {
+    return true;
+  } else if (tools.table.configStore.dense !== false) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+const screenCols = { xs: 1, sm: 2, md: 3, lg: 4, xl: 6 };
+const queryFormColsNumComputed = computed(() => {
+  if (typeof tools.props.queryFormColsNum === 'number' && tools.props.queryFormColsNum > 0) {
+    return tools.props.queryFormColsNum;
+  } else if (typeof tools.props.queryFormColsNum === 'object') {
+    const screen = { ...screenCols, ...tools.props.queryFormColsNum };
+    return screen[$q.screen.name];
+  }
+  return screenCols[$q.screen.name];
+});
+
+// 处理查询form显示的字段
+const handleQueryFormShowField = () => {
+  tools.table.queryFormDisplayFields = [];
+  if (tools.table.moreQueryStatus) {
+    tools.props.queryFormFields.forEach((item: any) => {
+      tools.table.queryFormDisplayFields.push(item);
+      item.showIf = () => {
+        return true;
+      };
+    });
+  } else {
+    // 一行应该显示的字段个数
+    const rowColsNum = queryFormColsNumComputed.value * (tools.props.queryFormRowNum || 1);
+    let currRowColsNum = 0;
+    tools.props.queryFormFields.forEach((item: any) => {
+      if (Tools.hasOwnProperty(item, 'colSpan')) {
+        currRowColsNum += item.colSpan;
+      } else {
+        currRowColsNum += 1;
+      }
+      if (currRowColsNum <= rowColsNum) {
+        tools.table.queryFormDisplayFields.push(item);
+        item.showIf = (form) => {
+          return true;
+        };
+      } else {
+        item.showIf = (form) => {
+          return false;
+        };
+      }
+    });
+  }
+};
+
+// 处理toobar
+const handleChildrenBtn = (arr, moreQueryShow) => {
+  const tempArr = <any>[];
+  for (let i = 0; i < arr.length; i++) {
+    const btn = arr[i];
+    if (typeof btn === 'string' && !buttons[btn]) {
+      throw new Error('[w-grid]`' + btn + '`' + ' toolbar action NOT exist.');
+    } else if (Array.isArray(btn) && btn.length > 0) {
+      const handleResult = handleChildrenBtn(btn, moreQueryShow);
+      if (handleResult && handleResult.length > 0) {
+        tempArr.push(handleResult);
+      }
+    } else if (typeof btn === 'string' && buttons[btn]) {
+      if (btn === tools.bm.query.name && i === 0) {
+        // 查询按钮为第一个时，追加更多查询时直接追加到查询按钮当前所在下标的后面一个，不能追加为数组，否则按钮组取第一个为 QBtnDropdown 左边按钮时取到的是一个数组，会报错。
+        // ['query', 'reset']
+        tempArr.push(buttons[btn]);
+        tempArr.push(buttons[tools.bm.moreQuery.name]);
+        tempArr.push(buttons[tools.bm.advancedQuery.name]);
+      } else if (btn === tools.bm.query.name) {
+        tempArr.push([buttons[btn], buttons[tools.bm.moreQuery.name]]);
+      } else {
+        tempArr.push(buttons[btn]);
+      }
+    } else if (typeof btn === 'object' && btn.extend && buttons[btn.extend]) {
+      // 继承内置按钮
+      let overrideClick = false;
+      if (btn.click) {
+        overrideClick = true;
+      }
+      tempArr.push({ ...buttons[btn.extend], ...btn, _click: buttons[btn.extend].click, overrideClick });
+    } else {
+      tempArr.push(btn);
+    }
+  }
+  return tempArr;
+};
+const handleToolbarActions = () => {
+  buttons_.value = [];
+  // 处理查询按钮，符合条件时给其追加更多查询按钮
+  let moreQueryShow = false;
+  const rowColsNum = queryFormColsNumComputed.value * (tools.props.queryFormRowNum || 1);
+  let currRowColsNum = 0;
+  let showQueryFormFieldNum = 0;
+  tools.props.queryFormFields.forEach((item: any) => {
+    if (Tools.hasOwnProperty(item, 'colSpan')) {
+      currRowColsNum += item.colSpan;
+    } else {
+      currRowColsNum += 1;
+    }
+    if (currRowColsNum <= rowColsNum) {
+      showQueryFormFieldNum += 1;
+    }
+  });
+  if (showQueryFormFieldNum < tools.props.queryFormFields.length) {
+    moreQueryShow = true;
+  }
+  tools.props.toolbarActions.forEach((btn: any, index) => {
+    if (typeof btn === 'string' && !buttons[btn]) {
+      throw new Error('[w-grid]`' + btn + '`' + ' toolbar action NOT exist.');
+    } else if (typeof btn === 'string' && buttons[btn]) {
+      if (btn === tools.bm.query.name) {
+        const tmpBtns = [buttons[btn]];
+        if (moreQueryShow) {
+          tmpBtns.push(buttons[tools.bm.moreQuery.name]);
+        }
+        if (tools.props.advancedQuery) {
+          tmpBtns.push(buttons[tools.bm.advancedQuery.name]);
+        }
+        if (tmpBtns.length === 1) {
+          buttons_.value.push(...tmpBtns);
+        } else {
+          buttons_.value.push(tmpBtns);
+        }
+      } else {
+        buttons_.value.push(buttons[btn]);
+      }
+    } else if (Array.isArray(btn) && btn.length > 0) {
+      buttons_.value.push(handleChildrenBtn(btn, moreQueryShow));
+    } else if (typeof btn === 'object' && btn.extend && buttons[btn.extend]) {
+      // 继承内置按钮
+      let overrideClick = false;
+      if (btn.click) {
+        overrideClick = true;
+      }
+      buttons_.value.push({ ...buttons[btn.extend], ...btn, _click: buttons[btn.extend].click, overrideClick });
+    } else {
+      buttons_.value.push(btn);
+    }
+  });
+  if (buttons_.value.length > 0 && buttons_.value[buttons_.value.length - 1] !== tools.bm.separator.name && tools.props.configButton) {
+    buttons_.value.push(buttons[tools.bm.separator.name]);
+  }
+  setLocaleFlag();
+};
+
+const setLocaleFlag = () => {
+  localeFlag.value = !localeFlag.value;
+};
+const resetLabel = () => {
+  Object.keys(buttons).forEach((btn) => {
+    if (typeof buttons[btn] === 'object' && buttons[btn].labelI18nKey) {
+      buttons[btn].label = $t(buttons[btn].labelI18nKey);
+    }
+  });
+};
+
+const buttonClick = (arr) => {
+  arr.forEach((button) => {
+    if (typeof button === 'object' && !Tools.isEmpty(button.click) && tools.props.dbClickOperation === button.name) {
+      toolbarRef.value.buttonClick(button);
+    } else if (Array.isArray(button) && button.length > 0) {
+      buttonClick(button);
+    }
+  });
+};
+const dbClickOperation = (row) => {
+  if (!Tools.isEmpty(row) && tools.props.dbClickOperation === tools.bm.expand.name) {
+    row[Constant.FIELD_NAMES.EXPAND] = Tools.isEmpty(row[Constant.FIELD_NAMES.EXPAND]) ? true : !row[Constant.FIELD_NAMES.EXPAND];
+  } else {
+    if (!buttons[tools.props.dbClickOperation] && checkConfigNotContains(buttons_.value)) {
+      throw new Error('[w-grid]`' + tools.props.dbClickOperation + '`' + ' toolbar action NOT exist.');
+    } else if (tools.props.dbClickOperation !== tools.bm.separator.name && buttons[tools.props.dbClickOperation] && checkConfigNotContains(buttons_.value)) {
+      // 双击时配置的dbClickOperation不在用户配置的按钮集中，直接调用内置按钮
+      toolbarRef.value.buttonClick(buttons[tools.props.dbClickOperation]);
+    } else {
+      buttonClick(buttons_.value);
+    }
+  }
+};
+// 检查用户配置的按钮中是否不包含固定名字的按钮
+const checkConfigNotContains = (arr) => {
+  let flag = true;
+  for (let i = 0; i < arr.length; i++) {
+    if (typeof arr[i] === 'object' && tools.props.dbClickOperation === arr[i]['name']) {
+      flag = false;
+      break;
+    } else if (Array.isArray(arr[i]) && arr[i].length > 0) {
+      const tempFlag = checkConfigNotContains(arr[i]);
+      flag = tempFlag;
+    }
+  }
+  return flag;
+};
+const getQueryForm = () => {
+  return formRef.value;
+};
+
+onBeforeMount(() => {
+  handleToolbarActions();
+});
+
+defineExpose({
+  setLocaleFlag,
+  handleQueryFormShowField,
+  handleToolbarActions,
+  resetLabel,
+  dbClickOperation,
+  getQueryForm,
+});
+</script>
+
+<style lang="css"></style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/Tr.vue b/io.sc.platform.core.frontend/src/platform/components/grid/Tr.vue
new file mode 100644
index 00000000..4dc496b1
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/Tr.vue
@@ -0,0 +1,117 @@
+<template>
+  <q-tr
+    ref="trRef"
+    :props="props.scope"
+    :no-hover="trNoHoverComputed"
+    :class="{ selected: trSelectedClassComputed }"
+    :draggable="draggableComputed"
+    @click.stop="tools.em.rowClick($event, props.scope.row, props.scope.rowIndex)"
+    @dblclick.stop="tools.em.rowDbClick($event, scope.row, scope.rowIndex)"
+    @dragstart="draggableComputed ? tools.dndFM.onDragStart($event, scope) : () => {}"
+    @dragleave="draggableComputed ? tools.dndFM.onDragLeave($event) : () => {}"
+    @dragover="draggableComputed ? tools.dndFM.onDragOver($event, scope, trMiddleHeightComputed) : () => {}"
+    @drop="draggableComputed ? tools.dndFM.onDrop($event, scope, trMiddleHeightComputed) : () => {}"
+    @dragend="draggableComputed ? tools.dndFM.onDragEnd($event, scope) : () => {}"
+  >
+    <q-td v-if="showCheckboxComputed" class="text-center checkbox_td">
+      <!-- checkbo选项 -->
+      <q-checkbox
+        v-model="rowDataComputed[tickedField]"
+        flat
+        :dense="tools.table.configStore.dense || tools.table.configStore.denseBody || false"
+        @update:model-value="tools.em.updateTicked($event, scope.row)"
+      />
+    </q-td>
+    <template v-for="(col, index) in props.scope.cols" :key="col.name">
+      <template v-if="index === 0">
+        <Td :scope="props.scope" :col="col" :level="props.level"></Td>
+      </template>
+      <Td v-else :scope="props.scope" :col="col" :level="props.level"></Td>
+    </template>
+  </q-tr>
+  <template v-if="showChildrenTrComputed">
+    <!-- 处理树表格的孩子行 -->
+    <template v-for="(child, childIndex) in props.scope.row.children" :key="child[Constant.FIELD_NAMES.ROW_KEY]">
+      <Tr
+        v-if="props.scope.row[Constant.FIELD_NAMES.EXPAND]"
+        :scope="GridTools.buildChildrenScope(props.scope, child, props.scope.pageIndex + childIndex, selectedField, tickedField)"
+        :level="props.level + 1"
+      ></Tr>
+    </template>
+  </template>
+  <InlineEditToolbar :row="props.scope.row"></InlineEditToolbar>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+import { Tools } from '@/platform';
+import { Constant, GridTools } from './ts/index';
+import Td from './Td.vue';
+import InlineEditToolbar from './extra/inline-edit/InlineEditToolbar.vue';
+
+const tools = <GridTools>inject('tools');
+const trRef = ref();
+const props = defineProps({
+  level: { type: Number, default: 0 },
+  scope: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+const selectedField = tools.props.selectedField;
+const tickedField = tools.props.tickedField;
+const selectMode = tools.props.selectMode;
+const dndMode = tools.props.dndMode;
+
+// 是否显示 checkbox 勾选框
+const showCheckboxComputed = computed(() => {
+  return tools.table.configStore.useCheckboxSelection && tools.props.selectMode !== Constant.SELECT_MODE.NONE && !tools.props.tree;
+});
+
+// 当前行数据
+const rowDataComputed = computed(() => {
+  return tools.dataFM.getRow(tools.table.rows, props.scope.row[Constant.FIELD_NAMES.ROW_KEY], false);
+});
+
+// 是否显示孩子行
+const showChildrenTrComputed = computed(() => {
+  return tools.props.tree && props.scope.row?.children;
+});
+
+// tr 是否禁用悬停效果
+const trNoHoverComputed = computed(() => {
+  if (selectMode === Constant.SELECT_MODE.ROW) {
+    return false;
+  }
+  return true;
+});
+// tr 是否应用选中样式
+const trSelectedClassComputed = computed(() => {
+  return props.scope.row[selectedField] && selectMode === Constant.SELECT_MODE.ROW;
+});
+
+// 行拖拽是否启用
+const draggableComputed = computed(() => {
+  return dndMode && !Tools.isEmpty(Constant.DND_MODE.getAll()[dndMode]) && tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.NONE;
+});
+
+// 得到表格数据行的中间高度
+const trMiddleHeightComputed = computed(() => {
+  if (trRef?.value) {
+    return trRef.value.$el.offsetHeight / 2;
+  } else {
+    return (tools.table.configStore.dense || tools.table.configStore.denseBody ? 24 : 48) / 2;
+  }
+});
+</script>
+
+<style lang="css">
+.checkbox_td {
+  padding: 0 !important;
+  width: 50px;
+  min-width: 50px;
+  max-width: 50px;
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridFirstTdContent.vue b/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridFirstTdContent.vue
new file mode 100644
index 00000000..3c35dbe4
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridFirstTdContent.vue
@@ -0,0 +1,269 @@
+<template>
+  <div class="flex flex-nowrap items-center h-full w-full treeGridFirstTd" style="flex-wrap: nowrap">
+    <!--层级占位符-->
+    <span :style="`width:${24 * props.level}px;`"></span>
+    <!--展开按钮-->
+    <q-btn
+      v-if="expandableComputed"
+      flat
+      dense
+      padding="0px 0px"
+      :icon="props.row.expand ? 'bi-dash' : 'bi-plus'"
+      :loading="lazyloading"
+      @click.stop="expandFun"
+      @dblclick.stop="() => {}"
+    >
+      <template #loading>
+        <q-spinner-gears />
+      </template>
+    </q-btn>
+    <!--展开按钮占位符-->
+    <span v-else style="width: 24px"></span>
+    <!--选择框-->
+    <q-checkbox
+      v-if="tools.table.configStore.useCheckboxSelection"
+      v-model="rowDataComputed[tickedField]"
+      flat
+      dense
+      @dblclick.stop="() => {}"
+      @update:model-value="selectedFun(rowDataComputed[tickedField], $event)"
+    />
+    <!-- 图标与显示内容区域 -->
+    <div class="treeGridIconAndName" @dragover="draggableComputed ? tools.dndFM.iconAndNameDragOver($event, props.row) : () => {}">
+      <q-icon v-if="typeof iconComputed === 'string'" :name="iconComputed" size="20px" class="px-1 treeGridIconAndName"></q-icon>
+      <q-icon v-else-if="typeof iconComputed === 'object'" size="20px" v-bind="iconComputed" class="px-1 treeGridIconAndName"></q-icon>
+      <span v-else class="px-1 treeGridIconAndName"></span>
+      <template v-if="tools.table.store.inlineEditStatus !== Constant.EDIT_STATUS.NONE && showInlineEditComponentComputed">
+        <InlineEditComponent :col="props.col" :row="props.row"></InlineEditComponent>
+      </template>
+      <template v-else>
+        <TdContent :value="props.value" class="treeGridIconAndName"></TdContent>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, computed, ref, watch } from 'vue';
+import { Tools, NotifyManager } from '@/platform';
+import InlineEditComponent from './extra/inline-edit/InlineEditComponent.vue';
+import TdContent from './TdContent.vue';
+import { DragAndDrop } from './ts/function/DragAndDrop';
+import { Constant, GridTools } from './ts/index';
+
+const tools = <GridTools>inject('tools');
+const lazyloading = ref(false);
+const props = defineProps({
+  level: { type: Number, default: 0 },
+  row: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  col: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  value: {
+    type: [Object, String, Number],
+    default: () => {
+      return '';
+    },
+  },
+});
+const selectedField = tools.props.selectedField;
+const tickedField = tools.props.tickedField;
+const rowKeyField = Constant.FIELD_NAMES.ROW_KEY;
+const expandField = Constant.FIELD_NAMES.EXPAND;
+const lazyloadNoChildrenField = Constant.FIELD_NAMES.LAZYLOAD_NO_CHILDREN;
+
+const style = {
+  icon: {
+    defaultTop: {
+      // 默认顶级节点图标
+      name: 'bi-folder-fill',
+      color: 'amber',
+    },
+    defaultChild: {
+      // 默认子节点图标
+      name: 'note',
+      color: '',
+    },
+  },
+};
+
+const expandableComputed = computed(() => {
+  if (tools.props.treeLazyLoad && !props.row[lazyloadNoChildrenField]) {
+    return true;
+  } else if (props.row.children && props.row.children.length > 0) {
+    return true;
+  }
+  return false;
+});
+
+// 当前行数据
+const rowDataComputed = computed(() => {
+  return tools.dataFM.getRow(tools.table.rows, props.row[rowKeyField], false);
+});
+
+const draggableComputed = computed(() => {
+  return (
+    tools.props.dndMode && !Tools.isEmpty(Constant.DND_MODE.getAll()[tools.props.dndMode]) && tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.NONE
+  );
+});
+
+const iconComputed = computed(() => {
+  if (!Tools.isEmpty(props.row['_dragIcon_'])) {
+    return {
+      name: props.row['_dragIcon_'],
+      color: DragAndDrop.DRAG_ICON.color,
+    };
+  } else if (tools.props.treeIcon) {
+    return tools.props.treeIcon(props.row);
+  } else {
+    if (tools.props.treeLazyLoad && !props.row[lazyloadNoChildrenField]) {
+      return {
+        name: style.icon.defaultTop.name,
+        color: style.icon.defaultTop.color,
+      };
+    } else if (props.row.children && props.row.children.length > 0) {
+      return {
+        name: style.icon.defaultTop.name,
+        color: style.icon.defaultTop.color,
+      };
+    } else {
+      return {
+        name: style.icon.defaultChild.name,
+        color: style.icon.defaultChild.color,
+      };
+    }
+  }
+});
+
+const showInlineEditComponentComputed = computed(() => {
+  return tools.editFM.isShowInlineEditor(props.col, props.row[rowKeyField]);
+});
+
+// 展开/收缩按钮触发事件
+const expandFun = async () => {
+  if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.NONE) {
+    if (tools.props.treeLazyLoad && (!props.row.children || props.row.children.length === 0)) {
+      lazyLoadExpandHandle(props.row);
+    } else {
+      rowDataComputed.value[expandField] = !props.row[expandField];
+    }
+  } else {
+    NotifyManager.info('请先保存或取消编辑状态');
+  }
+};
+
+const lazyLoadExpandHandle = async (row: any) => {
+  lazyloading.value = true;
+  const childrenData = await tools.reqApiFM.treeFetchDataByForeignKey(row[tools.props.primaryKey]);
+  if (childrenData.length > 0) {
+    tools.apiFM.localMode.addLocalData(childrenData);
+  } else {
+    rowDataComputed.value[lazyloadNoChildrenField] = true;
+  }
+  rowDataComputed.value[expandField] = true;
+  lazyloading.value = false;
+};
+
+// checkbox触发事件
+const selectedFun = (value, event) => {
+  const row = rowDataComputed.value;
+  if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.NONE) {
+    if (value) {
+      row[tickedField] = true;
+    } else {
+      row[tickedField] = false;
+    }
+    selectedChildren(row, value);
+    selectedParent(row, value);
+    if (tools.props.onUpdateTicked) {
+      tools.props.onUpdateTicked(event, row);
+    }
+  } else {
+    row[tickedField] = !row[tickedField];
+  }
+};
+
+// 设置子节点选中状态
+const selectedChildren = (row, value) => {
+  if (row.children && row.children.length > 0) {
+    for (let child of row.children) {
+      child[tickedField] = value;
+      selectedChildren(child, value);
+    }
+  }
+};
+
+// 设置父节点选中状态
+const selectedParent = (row, value) => {
+  if (row.parent) {
+    const parent = tools.dataFM.getRow(tools.table.rows, row.parent, true);
+    if (parent) {
+      if (value && childrenSelectedStatus(parent).allSelected) {
+        parent[tickedField] = true;
+      } else if (value) {
+        parent[tickedField] = null;
+      } else {
+        if (childrenSelectedStatus(parent).partSelected) {
+          parent[tickedField] = null;
+        } else {
+          parent[tickedField] = false;
+        }
+      }
+      selectedParent(parent, value);
+    }
+  }
+};
+
+// 子节点选中状态
+const childrenSelectedStatus = (row) => {
+  let result = {
+    allSelected: true,
+    partSelected: false,
+  };
+  if (row.children && row.children.length > 0) {
+    for (let i = 0; i < row.children.length; i++) {
+      if (!row.children[i][tickedField]) {
+        result.allSelected = false;
+      } else {
+        result.partSelected = true;
+      }
+      const temp = childrenSelectedStatus(row.children[i]);
+      if (!temp.allSelected) {
+        result.allSelected = false;
+      }
+      if (temp.partSelected) {
+        result.partSelected = true;
+      }
+    }
+  }
+  return result;
+};
+
+watch(
+  () => tools.dndFM.iconAndNameDwellTime.value,
+  (newVal, oldVal) => {
+    if (
+      newVal >= 3 &&
+      tools.dndFM.dwellRow &&
+      !tools.dndFM.dwellRow[Constant.FIELD_NAMES.EXPAND] &&
+      tools.dndFM.dwellRow[Constant.FIELD_NAMES.ROW_KEY] === props.row[Constant.FIELD_NAMES.ROW_KEY]
+    ) {
+      if (tools.props.treeLazyLoad && (!props.row.children || props.row.children.length === 0)) {
+        lazyLoadExpandHandle(tools.dndFM.dwellRow);
+      } else {
+        tools.apiFM.operator.expand(tools.dndFM.dwellRow);
+      }
+    }
+  },
+);
+</script>
+
+<style lang="css"></style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue b/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
deleted file mode 100644
index 366f6fa6..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
+++ /dev/null
@@ -1,907 +0,0 @@
-<template>
-  <q-tr
-    ref="trRef"
-    :no-hover="props.grid.props.selectMode === selectMode.row ? false : true"
-    :class="row[table.selectedField] && props.grid.props.selectMode === selectMode.row ? 'selected' : ''"
-    :draggable="draggableComputed"
-    @click.stop.prevent="click($event, row, props.rowIndex)"
-    @dblclick.stop.prevent="dbClick($event, row, props.rowIndex)"
-    @dragleave="draggableComputed ? onDragLeave($event, row) : () => {}"
-    @dragover="draggableComputed ? onDragOver($event, row) : () => {}"
-    @drop="draggableComputed ? onDrop($event, row) : () => {}"
-    @dragstart="draggableComputed ? onDragStart($event, row) : () => {}"
-  >
-    <q-td
-      :ref="(el) => setTdRef(el, cols[0])"
-      :class="props.grid.props.selectMode === selectMode.cell ? firstTdClassComputed : 'nowrap text-nowrap'"
-      :style="cols[0].type && table.bodyEditStatus !== 'none' ? 'width: ' + (tdWidth[cols[0].name] - 24) + 'px;' : ''"
-      @click="
-        () => {
-          // 判定是否要退出编辑模式
-          if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectMode === selectMode.cell) {
-            if (table['cellSelected']['colName'] !== cols[0]['name'] || table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
-              table.bodyEditStatus = 'none';
-            }
-          } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectMode === selectMode.cell) {
-            if (table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
-              table.bodyEditStatus = 'none';
-            }
-          }
-          if (table.bodyEditStatus === 'none' && props.grid.props.selectMode === selectMode.cell) {
-            table['cellSelected'] = {
-              row: toRaw(props.row),
-              rowKey: props.row[props.rowKey],
-              primaryKey: props.row[props.grid.props.primaryKey],
-              colName: cols[0]['name'],
-              value: props.row[cols[0]['name']],
-            };
-          }
-        }
-      "
-    >
-      <div ref="tdDivRef" class="flex flex-nowrap items-center h-full w-full" style="flex-wrap: nowrap">
-        <!--层级占位符-->
-        <span :style="`width:${24 * props.level}px;`"></span>
-        <!--展开按钮-->
-        <q-btn
-          v-if="row.children && row.children.length > 0"
-          flat
-          dense
-          padding="0px 0px"
-          :icon="row.expand ? 'bi-dash' : 'bi-plus'"
-          @click.stop="expandFun(row)"
-          @dblclick.stop="() => {}"
-        />
-        <!--展开按钮占位符-->
-        <span v-else style="width: 24px"></span>
-        <!--选择框-->
-        <q-checkbox
-          v-if="table.checkboxSelection"
-          v-model="props.getRow(table.rows, row[props.rowKey], false)[table.tickedField]"
-          flat
-          dense
-          @dblclick.stop="() => {}"
-          @update:model-value="selectedFun(row[table.tickedField], row, $event)"
-        />
-        <!--图标-->
-        <q-icon v-if="typeof iconComputed === 'string'" :name="iconComputed" size="20px" class="px-1"></q-icon>
-        <q-icon v-else-if="typeof iconComputed === 'object'" size="20px" v-bind="iconComputed" class="px-1"></q-icon>
-        <span v-else class="px-1"></span>
-        <template v-if="cols[0]">
-          <template
-            v-if="
-              !Tools.isEmpty(cols[0]['type']) &&
-              ((isSelectedRowComputed && table.bodyEditStatus === 'rowEdit') ||
-                table.bodyEditStatus === 'rowsEdit' ||
-                (isSelectedCell(cols[0]) && table.bodyEditStatus === 'cellEdit'))
-            "
-          >
-            <template v-if="props.grid.props.localMode && table.bodyEditStatus !== editStatus.rows">
-              <component
-                :is="cols[0]['type']"
-                :ref="(el) => setComponentRef(el, props.row, cols[0])"
-                v-bind="cols[0]['attrs']"
-                v-model="props.getRow(table.rows, props.row[props.rowKey], false)[cols[0]['name']]"
-                bg-color="light-green-1"
-                @blur="
-                  () => {
-                    if (props.grid.props.selectMode === selectMode.cell && table.bodyEditStatus === editStatus.cell) {
-                      // 失去焦点，退出编辑模式
-                      table.bodyEditStatus = editStatus.none;
-                      table['cellSelected'] = {};
-                    }
-                  }
-                "
-              ></component>
-            </template>
-            <template v-else>
-              <component
-                :is="cols[0]['type']"
-                :ref="(el) => setComponentRef(el, props.row, cols[0])"
-                v-bind="cols[0]['attrs']"
-                v-model="props.getRow(table.rows, props.row[props.rowKey], false)['_rowOldValue'][cols[0]['name']]"
-                bg-color="light-green-1"
-              ></component>
-            </template>
-          </template>
-          <template v-else>
-            <template v-if="cols[0].value && typeof cols[0].value === 'object' && cols[0].value.componentType">
-              <component :is="cols[0].value.componentType" v-bind="cols[0].value.attrs"></component>
-            </template>
-            <template v-else>
-              <span v-dompurify-html="cols[0].value || ''"></span>
-            </template>
-          </template>
-        </template>
-      </div>
-    </q-td>
-    <template v-for="(col, index) in cols" :key="col.name">
-      <q-td
-        v-if="index > 0"
-        :ref="(el) => setTdRef(el, col)"
-        :class="props.grid.props.selectMode === selectMode.cell ? tdClassComputed(col) : col.__thClass + ' ' + col.classes"
-        :title="getTitle(col)"
-        :style="col.style + (col.type && table.bodyEditStatus !== 'none' ? ';width: ' + (tdWidth[col.name] - 24) + 'px;' : '')"
-        @click="
-          () => {
-            // 判定是否要退出编辑模式
-            if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectMode === selectMode.cell) {
-              if (table['cellSelected']['colName'] !== col['name'] || table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
-                table.bodyEditStatus = 'none';
-              }
-            } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectMode === selectMode.cell) {
-              if (table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
-                table.bodyEditStatus = 'none';
-              }
-            }
-            if (table.bodyEditStatus === 'none' && props.grid.props.selectMode === selectMode.cell) {
-              table['cellSelected'] = {
-                row: toRaw(props.row),
-                rowKey: props.row[props.rowKey],
-                primaryKey: props.row[props.grid.props.primaryKey],
-                colName: col['name'],
-                value: props.row[col['name']],
-              };
-            }
-          }
-        "
-      >
-        <template
-          v-if="
-            !Tools.isEmpty(col.type) &&
-            ((isSelectedRowComputed && table.bodyEditStatus === 'rowEdit') ||
-              table.bodyEditStatus === 'rowsEdit' ||
-              (isSelectedCell(col) && table.bodyEditStatus === 'cellEdit'))
-          "
-        >
-          <template v-if="props.grid.props.localMode && table.bodyEditStatus !== editStatus.rows">
-            <component
-              :is="col.type"
-              :ref="(el) => setComponentRef(el, props.row, col)"
-              v-bind="componentAttrs(col)"
-              v-model="props.getRow(table.rows, props.row[props.rowKey], false)[col.name]"
-              bg-color="light-green-1"
-            ></component>
-          </template>
-          <template v-else>
-            <component
-              :is="col.type"
-              :ref="(el) => setComponentRef(el, props.row, col)"
-              v-bind="componentAttrs(col)"
-              v-model="props.getRow(table.rows, props.row[props.rowKey], false)['_rowOldValue'][col.name]"
-              bg-color="light-green-1"
-            ></component>
-          </template>
-        </template>
-        <template v-else>
-          <template v-if="col.value && typeof col.value === 'object' && col.value.componentType && col.value.bindModelValue">
-            <component
-              :is="col.value.componentType"
-              v-bind="col.value.attrs"
-              v-model="props.getRow(table.rows, row[props.rowKey], false)[col.name]"
-            ></component>
-          </template>
-          <template v-else-if="col.value && typeof col.value === 'object' && col.value.componentType">
-            <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
-          </template>
-          <template v-else>
-            <span v-dompurify-html="!Tools.isEmpty(col.value) ? col.value : ''"></span>
-          </template>
-        </template>
-      </q-td>
-    </template>
-  </q-tr>
-  <GridEditToolbar
-    :grid="props.grid"
-    :url="props.url"
-    :row-key-name="props.rowKey"
-    :row="props.row"
-    :get-row="props.getRow"
-    :get-row-component-refs="props.getRowComponentRefs"
-    :set-old-value="props.setOldValue"
-    :no-data-tr-colspan="props.noDataTrColspan"
-  ></GridEditToolbar>
-  <template v-for="(child, index) in row.children" :key="child[rowKey]">
-    <TreeGridRow
-      v-if="row.expand"
-      :columns-map="props.columnsMap"
-      :row="child"
-      :cols="childColsHandler(child)"
-      :level="props.level + 1"
-      :row-key="props.rowKey"
-      :grid="props.grid"
-      :grid-row-click="props.gridRowClick"
-      :grid-row-db-click="gridRowDbClick"
-      :after-drag-and-drop="props.afterDragAndDrop"
-      :get-row="props.getRow"
-      :url="props.url"
-      :get-row-component-refs="props.getRowComponentRefs"
-      :set-old-value="props.setOldValue"
-      :no-data-tr-colspan="props.noDataTrColspan"
-      :updates="props.updates"
-      :row-index="index"
-    ></TreeGridRow>
-  </template>
-</template>
-<script setup lang="ts">
-import { ref, computed, inject, toRaw, reactive, onMounted } from 'vue';
-import { Tools, NotifyManager } from '@/platform';
-import GridEditToolbar from './GridEditToolbar.vue';
-import { dndImage, dndMode, selectMode, editStatus } from './ts/grid';
-
-const trRef = ref();
-const tdDivRef = ref();
-const componentOneRef = ref();
-const componentRef = ref({});
-const tdRef = ref({});
-const tdWidth = ref({});
-const props = defineProps({
-  level: { type: Number, default: 0 },
-  columnsMap: {
-    type: Map,
-    default: () => {
-      return new Map();
-    },
-  },
-  row: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  cols: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  rowKey: { type: String, default: '_rowKey_' },
-  rowIndex: { type: Number, default: undefined },
-  grid: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  getRow: {
-    type: Function,
-    default: () => {},
-  },
-  gridRowClick: {
-    type: Function,
-    default: () => {},
-  },
-  gridRowDbClick: {
-    type: Function,
-    default: () => {},
-  },
-  afterDragAndDrop: {
-    type: Function,
-    default: () => {},
-  },
-  url: {
-    // 表格所有的url
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  getRowComponentRefs: {
-    type: Function,
-    default: () => {},
-  },
-  setOldValue: {
-    type: Function,
-    default: () => {},
-  },
-  noDataTrColspan: {
-    type: Number,
-    default: () => {
-      return 0;
-    },
-  },
-  updates: {
-    type: Function,
-    default: () => {},
-  },
-});
-const table = inject('table');
-
-const style = {
-  icon: {
-    defaultTop: {
-      // 默认顶级节点图标
-      name: 'bi-folder-fill',
-      color: 'amber',
-    },
-    defaultChild: {
-      // 默认子节点图标
-      name: 'note',
-      color: '',
-    },
-    drag: {
-      // 拖拽时父节点图标
-      name: 'bi-folder-symlink-fill',
-      color: 'amber',
-    },
-  },
-  dragLine: {
-    // 拖拽线样式
-    width: '2px',
-    style: 'dashed',
-    color: 'orange',
-  },
-};
-
-const getTitle = (col) => {
-  if (table['columns'] && table['columns'].length > 0) {
-    const column = table['columns'].find((item) => item['name'] === col.name);
-    if (column && column['title'] && typeof column['title'] === 'function') {
-      return column.title({ grid: props.grid, row: toRaw(props.row), value: props.row[col.name] });
-    } else if (column && column['title']) {
-      return column['title'];
-    }
-  }
-  if (col.classes?.indexOf('truncate') > -1 && !Tools.isEmpty(props.row[col.name]) && typeof props.row[col.name] !== 'object') {
-    return props.row[col.name];
-  }
-  return '';
-};
-
-const firstTdClassComputed = computed(() => {
-  const tdClass = <any>['nowrap', 'text-nowrap'];
-  if (props.grid.props.selectMode === selectMode.cell) {
-    tdClass.push('cellHover');
-  }
-  if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) {
-    if (table['cellSelected']['colName'] === props.cols[0]['name'] && table['cellSelected']['rowKey'] === props.row[props.rowKey]) {
-      tdClass.push('cellSelected');
-    }
-  }
-  return tdClass;
-});
-const tdClassComputed = computed(() => {
-  return (col) => {
-    let tdClass = col.__thClass + ' ' + col.classes;
-    if (props.grid.props.selectMode === selectMode.cell) {
-      tdClass += ' cellHover';
-    }
-    if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) {
-      if (table['cellSelected']['colName'] === col['name'] && table['cellSelected']['rowKey'] === props.row[props.rowKey]) {
-        tdClass += ' cellSelected';
-      }
-    }
-    return tdClass;
-  };
-});
-
-const draggableComputed = computed(() => {
-  if (
-    props.grid.props.dndMode &&
-    typeof props.grid.props.dndMode === 'string' &&
-    !Tools.isEmpty(dndMode[props.grid.props.dndMode]) &&
-    table.bodyEditStatus === editStatus.none
-  ) {
-    return true;
-  }
-  return false;
-});
-
-const isSelectedRowComputed = computed(() => {
-  const selected = props.grid.getSelectedRow();
-  if (!Tools.isEmpty(selected)) {
-    return props.row[props.rowKey] === props.grid.getSelectedRow()[props.rowKey];
-  }
-  return false;
-});
-const isSelectedCell = (col) => {
-  const selected = props.grid.getSelectedCell();
-  if (selected?.colName && props.row[props.rowKey] === selected['row'][props.rowKey] && col['name'] === selected.colName) {
-    return true;
-  }
-  return false;
-};
-
-const iconComputed = computed(() => {
-  if (!Tools.isEmpty(props.row['_dragIcon_'])) {
-    return {
-      name: props.row['_dragIcon_'],
-      color: style.icon.drag.color,
-    };
-  } else if (props.grid.props.treeIcon) {
-    return props.grid.props.treeIcon(props.row);
-  } else {
-    if (props.row.children && props.row.children.length > 0) {
-      return {
-        name: style.icon.defaultTop.name,
-        color: style.icon.defaultTop.color,
-      };
-    } else {
-      return {
-        name: style.icon.defaultChild.name,
-        color: style.icon.defaultChild.color,
-      };
-    }
-  }
-});
-
-const componentAttrs = (col) => {
-  if (col.attrs) {
-    return col.attrs;
-  } else if (props.grid.props.editor?.form?.fields) {
-    const field = props.grid.props.editor.form.fields.find((item) => item['name'] === col.name);
-    if (field) {
-      return { ...field, label: undefined };
-    }
-  }
-  return undefined;
-};
-
-// 展开/收缩按钮触发事件
-const expandFun = (row) => {
-  if (table.bodyEditStatus === 'none') {
-    row.expand = !row.expand;
-  } else {
-    NotifyManager.info('请先保存或取消编辑状态');
-  }
-};
-
-// checkbox触发事件
-const selectedFun = (value, row, event) => {
-  if (table.bodyEditStatus === 'none') {
-    if (value) {
-      props.getRow(table.rows, row[props.rowKey], false)[table.tickedField] = true;
-    } else {
-      props.getRow(table.rows, row[props.rowKey], false)[table.tickedField] = false;
-    }
-    selectedChildren(row, value);
-    selectedParent(row, value);
-    if (props.grid.props.onUpdateTicked) {
-      props.grid.props.onUpdateTicked(event, row);
-    }
-  } else {
-    props.getRow(table.rows, row[props.rowKey], false)[table.tickedField] = !props.getRow(table.rows, row[props.rowKey], false)[table.tickedField];
-  }
-};
-
-// 设置子节点选中状态
-const selectedChildren = (row, value) => {
-  if (row.children && row.children.length > 0) {
-    for (let child of row.children) {
-      child[table.tickedField] = value;
-      selectedChildren(child, value);
-    }
-  }
-};
-
-// 设置父节点选中状态
-const selectedParent = (row, value) => {
-  if (row.parent) {
-    const parent = props.getRow(table.rows, row.parent, true);
-    if (parent) {
-      if (value && childrenSelectedStatus(parent).allSelected) {
-        parent[table.tickedField] = true;
-        // selectedPush(parent);
-      } else if (value) {
-        parent[table.tickedField] = null;
-      } else {
-        // selectedRemove(parent);
-        if (childrenSelectedStatus(parent).partSelected) {
-          parent[table.tickedField] = null;
-        } else {
-          parent[table.tickedField] = false;
-        }
-      }
-      selectedParent(parent, value);
-    }
-  }
-};
-
-// 子节点选中状态
-const childrenSelectedStatus = (row) => {
-  let result = {
-    allSelected: true,
-    partSelected: false,
-  };
-  if (row.children && row.children.length > 0) {
-    for (let i = 0; i < row.children.length; i++) {
-      if (!row.children[i][table.tickedField]) {
-        result.allSelected = false;
-      } else {
-        result.partSelected = true;
-      }
-      const temp = childrenSelectedStatus(row.children[i]);
-      if (!temp.allSelected) {
-        result.allSelected = false;
-      }
-      if (temp.partSelected) {
-        result.partSelected = true;
-      }
-    }
-  }
-  return result;
-};
-
-// 子节点cols属性处理
-const childColsHandler = (child) => {
-  const cols = <any>[];
-  props.cols.forEach((col) => {
-    if (props.columnsMap.get(col.name) && props.columnsMap.get(col.name).format) {
-      let value = child[col.name];
-      try {
-        value = props.columnsMap.get(col.name).format(child[col.name], child);
-      } catch (error) {
-        console.error('format error!');
-      }
-      cols.push({ ...col, value: value });
-    } else {
-      cols.push({ ...col, value: child[col.name] });
-    }
-  });
-  return cols;
-};
-
-document.addEventListener('dragstart', function (e) {
-  if (tdDivRef?.value) {
-    tdDivRef.value.classList.add('gridTdDiv');
-  }
-});
-document.addEventListener('drop', function (e) {
-  if (tdDivRef?.value) {
-    tdDivRef.value.classList.remove('gridTdDiv');
-  }
-});
-
-// 拖拽开始
-const onDragStart = (e, dataRow) => {
-  const img = new Image();
-  img.src = dndImage;
-  e.dataTransfer.setDragImage(img, 0, 0);
-  const selecteds = props.grid.getSelectedRows();
-  if (
-    selecteds.length > 0 &&
-    selecteds.findIndex((item) => {
-      return item[props.rowKey] === dataRow[props.rowKey];
-    }) > -1
-  ) {
-    table.dragRecords = selecteds;
-  } else {
-    props.grid.clearSelected();
-    // 触发选择
-    dataRow[table.selectedField] = true;
-    table.dragRecords = [dataRow];
-  }
-  e.dataTransfer.effectAllowed = 'move';
-};
-const addDragTopStyle = (e) => {
-  if (e.target?.parentNode?.children && e.target.nodeName === 'TD') {
-    for (let i = 0; i < e.target.parentNode.children.length; i++) {
-      e.target.parentNode.children[i].style.borderTopWidth = style.dragLine.width;
-      e.target.parentNode.children[i].style.borderTopStyle = style.dragLine.style;
-      e.target.parentNode.children[i].style.borderTopColor = style.dragLine.color;
-    }
-  }
-};
-const removeDragTopStyle = (e) => {
-  if (e.target?.parentNode?.children && e.target.nodeName === 'TD') {
-    for (let i = 0; i < e.target.parentNode.children.length; i++) {
-      e.target.parentNode.children[i].style.borderTopWidth = '';
-      e.target.parentNode.children[i].style.borderTopStyle = '';
-      e.target.parentNode.children[i].style.borderTopColor = '';
-    }
-  }
-};
-const addDragBottomStyle = (e) => {
-  if (e.target?.parentNode?.children && e.target.nodeName === 'TD') {
-    for (let i = 0; i < e.target.parentNode.children.length; i++) {
-      e.target.parentNode.children[i].style.borderBottomWidth = style.dragLine.width;
-      e.target.parentNode.children[i].style.borderBottomStyle = style.dragLine.style;
-      e.target.parentNode.children[i].style.borderBottomColor = style.dragLine.color;
-    }
-  }
-};
-const removeDragBottomStyle = (e) => {
-  if (e.target?.parentNode?.children && e.target.nodeName === 'TD') {
-    for (let i = 0; i < e.target.parentNode.children.length; i++) {
-      e.target.parentNode.children[i].style.borderBottomWidth = '';
-      e.target.parentNode.children[i].style.borderBottomStyle = '';
-      e.target.parentNode.children[i].style.borderBottomColor = '';
-    }
-  }
-};
-
-// 设置拖拽目标的父节点icon图标
-const setDragIcon = (arr, key: string = '') => {
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i].children && arr[i].children.length > 0) {
-      if (!Tools.isEmpty(key) && arr[i][props.grid.props.primaryKey] === key) {
-        if (Tools.isEmpty(arr[i]['_dragIcon_']) || arr[i]['_dragIcon_'] !== style.icon.drag.name) {
-          arr[i]['_dragIcon_'] = style.icon.drag.name;
-        }
-      } else {
-        arr[i]['_dragIcon_'] = '';
-      }
-      setDragIcon(arr[i].children, key);
-    }
-  }
-};
-
-/**
- * 判断是否可以拖拽
- * @param dragRecords 拖拽的记录集
- * @param targetParentKey 当前鼠标所在的目标行的父节点key
- */
-const canDrag = (dragRecords, targetParentKey) => {
-  if (Tools.isEmpty(targetParentKey)) {
-    return true;
-  }
-  // 判断拖拽的行是否为当前鼠标所在的目标行的父节点（只要存在父，一直往上找）
-  let result = true;
-  let parentKey = targetParentKey;
-  while (!Tools.isEmpty(parentKey)) {
-    if (
-      dragRecords.findIndex((item) => {
-        return item[props.grid.props.primaryKey] === parentKey;
-      }) > -1
-    ) {
-      result = false;
-      parentKey = null;
-    } else {
-      parentKey = props.getRow(table.rows, parentKey, true)[props.grid.props.foreignKey];
-    }
-  }
-  return result;
-};
-
-// 得到表格数据行的中间高度
-const gridTrMiddleHeightComputed = computed(() => {
-  if (trRef?.value) {
-    return trRef.value.$el.offsetHeight / 2;
-  } else {
-    return (table.dense || table.denseBody ? 24 : 48) / 2;
-  }
-});
-
-// 根据传入的数据行判断是否在当前拖拽的记录集合中
-const dragRecordsContains = (dataRow) => {
-  return (
-    table.dragRecords.findIndex((item) => {
-      return item[props.rowKey] === dataRow[props.rowKey];
-    }) > -1
-  );
-};
-
-// 拖拽至不可放置区域触发
-const onDragLeave = (e, dataRow) => {
-  removeDragTopStyle(e);
-  removeDragBottomStyle(e);
-  if (tdDivRef?.value) {
-    tdDivRef.value.classList.remove('gridTdDiv');
-  }
-};
-
-/**
- * 拖拽过程触发
- * @param e 拖拽的html元素
- * @param dataRow 当前鼠标所在的目标行数据
- */
-const onDragOver = (e, dataRow) => {
-  e.preventDefault();
-  if (!canDrag(table.dragRecords, dataRow[props.grid.props.foreignKey])) {
-    removeDragTopStyle(e);
-    removeDragBottomStyle(e);
-    setDragIcon(table.rows);
-    e.dataTransfer.dropEffect = 'none';
-  } else {
-    if (e.target.nodeName === 'TD' && e.offsetY <= gridTrMiddleHeightComputed.value && !dragRecordsContains(dataRow)) {
-      removeDragBottomStyle(e);
-      addDragTopStyle(e);
-    } else if (e.target.nodeName === 'TD' && e.offsetY > gridTrMiddleHeightComputed.value && !dragRecordsContains(dataRow)) {
-      removeDragTopStyle(e);
-      addDragBottomStyle(e);
-    }
-    if (!Tools.isUndefinedOrNull(dataRow[props.grid.props.foreignKey])) {
-      setDragIcon(table.rows, dataRow[props.grid.props.foreignKey]);
-    } else {
-      setDragIcon(table.rows);
-    }
-    e.dataTransfer.dropEffect = 'move';
-  }
-};
-
-// 删除表格中的数据
-const removeRecord = (arr, removeData) => {
-  let index = 0;
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i][props.rowKey] === removeData[props.rowKey]) {
-      arr.splice(i, 1);
-      index = i;
-      break;
-    } else if (arr[i].children && arr[i].children.length > 0) {
-      const a = removeRecord(arr[i].children, removeData);
-      if (a > 0) {
-        index = a;
-      }
-    }
-  }
-  return index;
-};
-
-// 待更新的排序数据
-const updateOrderData = <any>[];
-
-// 处理树节点的增加
-const nodeSplice = (e, dragIndex, targetIndex, drag, target, arr) => {
-  if (
-    (Tools.isEmpty(drag[props.grid.props.foreignKey]) && Tools.isEmpty(target[props.grid.props.foreignKey])) ||
-    drag[props.grid.props.foreignKey] === target[props.grid.props.foreignKey]
-  ) {
-    const lessThanResult = dragLessThanTarget(dragIndex, targetIndex);
-    // 父节点相同的同级处理
-    if (e.offsetY <= gridTrMiddleHeightComputed.value && lessThanResult) {
-      arr.splice(targetIndex - 1, 0, drag);
-    } else if (e.offsetY > gridTrMiddleHeightComputed.value && !lessThanResult) {
-      arr.splice(targetIndex + 1, 0, drag);
-    } else {
-      arr.splice(targetIndex, 0, drag);
-    }
-  } else {
-    // 拖拽节点与目标节点不同级处理
-    if (e.offsetY <= gridTrMiddleHeightComputed.value) {
-      arr.splice(targetIndex, 0, drag);
-    } else if (e.offsetY > gridTrMiddleHeightComputed.value) {
-      arr.splice(targetIndex + 1, 0, drag);
-    }
-  }
-};
-
-// 设置排序号
-const setOrder = (arr) => {
-  arr.forEach((item, index) => {
-    item[props.grid.props.dndOrderBy] = index + 1;
-    // 添加至待更新集合中
-    updateOrderData.push({ ...toRaw(item), children: null });
-  });
-};
-
-// 增加并重新设置父属性
-const childrenResetOrder = (e, arr, addData, targetData, dragIndex, targetIndex) => {
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i][props.grid.props.primaryKey] === targetData[props.grid.props.foreignKey]) {
-      nodeSplice(e, dragIndex, targetIndex, addData, targetData, arr[i].children);
-      // 修改父
-      addData[props.grid.props.foreignKey] = arr[i][props.grid.props.primaryKey];
-      // 重新设置排序号
-      setOrder(arr[i].children);
-      break;
-    } else if (arr[i].children && arr[i].children.length > 0) {
-      childrenResetOrder(e, arr[i].children, addData, targetData, dragIndex, targetIndex);
-    }
-  }
-};
-
-const dragLessThanTarget = (dragIndex, targetIndex) => {
-  if (dragIndex < targetIndex) {
-    return true;
-  }
-  return false;
-};
-
-// 数据处理
-const resetOrderDataHandler = (e, dragRecords, targetData, targetIndex) => {
-  dragRecords.forEach((item) => {
-    // 从表格数据中将拖拽数据删除
-    const itemIndex = removeRecord(table.rows, item);
-    if (Tools.isEmpty(targetData[props.grid.props.foreignKey])) {
-      nodeSplice(e, itemIndex, targetIndex, item, targetData, table.rows);
-      item[props.grid.props.foreignKey] = null;
-      setOrder(table.rows);
-    } else {
-      childrenResetOrder(e, table.rows, item, targetData, itemIndex, targetIndex);
-    }
-  });
-};
-
-// 重新设置树的排序
-const resetOrder = (e, dragRecords, arr, targetData) => {
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i][props.rowKey] === targetData[props.rowKey]) {
-      resetOrderDataHandler(e, dragRecords, targetData, i);
-      break;
-    } else if (arr[i].children && arr[i].children.length > 0) {
-      resetOrder(e, dragRecords, arr[i].children, targetData);
-    }
-  }
-};
-
-// 拖拽放置时触发
-const onDrop = (e, dataRow) => {
-  e.preventDefault();
-  removeDragTopStyle(e);
-  removeDragBottomStyle(e);
-  setDragIcon(table.rows);
-  if (
-    table.dragRecords.findIndex((item) => {
-      return item[props.rowKey] === dataRow[props.rowKey];
-    }) > -1
-  ) {
-    return;
-  }
-  // 每次放置时清空待更新集合
-  updateOrderData.splice(0, updateOrderData.length);
-  // 将拖动的数据及其子节点放到目标数据位置，并将目标数据父节点下的子节点重新排序。
-  resetOrder(e, table.dragRecords, table.rows, dataRow);
-
-  // 请求后端更新排序
-  if (props.grid.props.dndMode === dndMode.server && updateOrderData?.length > 0) {
-    props.updates(updateOrderData);
-  }
-
-  props.afterDragAndDrop(updateOrderData);
-};
-
-const click = (evt, row, rowIndex) => {
-  const selected = props.grid.getSelectedRow();
-  if (
-    props.grid.props.localMode &&
-    table.bodyEditStatus !== editStatus.none &&
-    props.grid.props.selectMode === selectMode.row &&
-    selected &&
-    row[props.rowKey] !== selected[props.rowKey]
-  ) {
-    // 退出编辑状态
-    table.bodyEditStatus = editStatus.none;
-  } else if (table.bodyEditStatus === editStatus.none && props.grid.props.selectMode !== selectMode.none) {
-    if (!evt.ctrlKey) {
-      props.grid.clearSelected();
-    }
-    row[table.selectedField] = true;
-    if (props.grid.props.onRowClick) {
-      props.grid.props.onRowClick({
-        grid: props.grid,
-        evt: evt,
-        row: row,
-        index: rowIndex,
-      });
-    }
-  }
-};
-const dbClick = (evt, row, rowIndex) => {
-  props.gridRowDbClick(evt, row, rowIndex);
-};
-
-const setComponentRef = (el, row, col) => {
-  if (el && !Tools.isEmpty(col.type)) {
-    componentRef.value[row[props.rowKey] + '_' + col.name] = el;
-  }
-};
-const setTdRef = (el, col) => {
-  if (el && !tdRef.value[col['name']]) {
-    tdRef.value[col['name']] = el;
-  }
-};
-
-const getComponentOneRef = () => {
-  return componentOneRef.value;
-};
-const getComponentRef = () => {
-  return componentRef.value;
-};
-
-onMounted(() => {
-  Object.keys(tdRef.value).forEach((item) => {
-    tdWidth.value[item] = tdRef.value[item].$el.clientWidth;
-  });
-});
-
-defineExpose({
-  getComponentRef,
-  getComponentOneRef,
-});
-</script>
-
-<style lang="css">
-.gridTdDiv {
-  pointer-events: none;
-}
-</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
index 92ac8bdf..0e58cb2f 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
@@ -1,151 +1,88 @@
 <template>
-  <div v-show="showIfComputed" class="w-grid" style="height: 100%">
-    <q-resize-observer debounce="500" @resize="onResize" />
+  <div v-show="tools.cm.showIf.value" class="w-grid" style="height: 100%">
+    <q-resize-observer debounce="500" @resize="tools.opFM.resize" />
     <q-table
       ref="tableRef"
-      v-model:pagination="state.pagination"
+      v-model:pagination="tools.table.store.pagination"
       flat
       binary-state-sort
       :no-data-label="$t('tip.noData')"
       :hide-no-data="true"
       :loading-label="$t('tip.dataLoading')"
       v-bind="attrs"
-      :separator="table.separator"
+      :separator="tools.table.configStore.separator"
       :hide-header="props.hideHeader"
-      :selection="selectionComputed"
-      :rows="table.rows"
-      :columns="columnsComputed"
-      :rows-per-page-options="pageable && !props.localMode && !tree && state.refHeightWidth.middleWidth > 600 ? state.pagination.rowsPerPageOptions : []"
-      :loading="state.loading"
-      :class="tableClassComputed"
-      :table-style="tableHeightComputed"
-      :row-key="rowKey_"
-      :visible-columns="visibleColumnsComputed"
+      selection="multiple"
+      :rows="tools.table.rows"
+      :columns="tools.table.columns"
+      :rows-per-page-options="tools.cm.rowsPerPageOptions.value"
+      :loading="tools.table.store.loading"
+      :class="tools.cm.tableClass.value"
+      :table-style="tools.cm.tableHeight.value"
+      :row-key="Constant.FIELD_NAMES.ROW_KEY"
+      :visible-columns="tools.cm.displayColumns.value"
       :hide-bottom="pageable && !props.localMode && !tree ? false : true"
-      @request="onRequest"
-      @fullscreen="tableFullscreenFun"
+      @request="tools.reqApiFM.fetchData"
+      @fullscreen="tools.opFM.tableFullscreen"
     >
       <!-- 查询表单与按钮工具栏 -->
       <template #top="scope">
-        <q-resize-observer debounce="100" @resize="onResize" />
-        <GridTop
-          ref="topRef"
-          :grid="instance"
-          :scope="scope"
-          :more-column-title-array="[]"
-          :build-query-criterias="buildQueryCriterias"
-          :columns="columnsComputed"
-          :url="url"
-        >
-        </GridTop>
+        <q-resize-observer debounce="100" @resize="tools.opFM.resize" />
+        <Top ref="topRef" :scope="scope"> </Top>
       </template>
 
       <!-- 表格列头 -->
       <template #header="scope">
-        <GridHeader
-          ref="headerRef"
-          :grid="instance"
-          :scope="scope"
-          :selection="selectionComputed"
-          :dense-header="denseHeaderComputed"
-          :raw-columns="rawColumns"
-          :table-columns="tableColumns"
-          :exclude-column-num="excludeColumnNum"
-          :no-data-tr-height-style="noDataTrHeightComputed"
-          :no-data-tr-colspan="noDataTrColspanComputed"
-        ></GridHeader>
+        <Header ref="headerRef" :scope="scope"></Header>
       </template>
 
       <!-- 表格内容 -->
       <template #body="scope">
-        <GridBody
-          ref="bodyRef"
-          :grid="instance"
-          :url="url"
-          :scope="scope"
-          :dense-body="denseBodyComputed"
-          :table-columns-map="tableColumnsMap"
-          :row-key-name="rowKey_"
-          :row-click="rowClick"
-          :row-db-click="rowDbClick"
-          :after-drag-and-drop="afterDragAndDrop"
-          :get-row="getRow"
-          :set-old-value="setOldValue"
-          :no-data-tr-colspan="noDataTrColspanComputed"
-          :all-ticked-status="allTickedStatus"
-        ></GridBody>
+        <Body ref="bodyRef" :scope="scope"></Body>
       </template>
 
       <!-- 加载状态 -->
       <template #loading>
-        <q-inner-loading :showing="state.loading" style="z-index: 999">
+        <q-inner-loading :showing="tools.table.store.loading" style="z-index: 999">
           <q-spinner-gears size="50px" color="primary" />
         </q-inner-loading>
       </template>
 
       <!-- 分页栏 -->
       <template #pagination="scope">
-        <GridPagination
-          ref="paginationRef"
-          v-model="state.pagination.page"
-          :grid="instance"
-          :scope="scope"
-          :state="state"
-          :dense-bottom="denseBottomComputed"
-          :request="onRequest"
-        ></GridPagination>
+        <Pagination ref="paginationRef" v-model="tools.table.store.pagination.page" :scope="scope"></Pagination>
       </template>
 
       <!-- 隐藏表头且无数据时 -->
-      <template v-if="table.rows.length === 0 && props.hideHeader" #top-row>
-        <div :style="hideHeaderAndNoDataStyleComputed"><q-icon size="2em" name="info" />{{ $t('tip.noData') }}</div>
+      <template v-if="tools.table.rows.length === 0 && props.hideHeader" #top-row>
+        <div :style="tools.cm.noDataStyle.value"><q-icon size="2em" name="info" />{{ $t(tools.table.store.noDataLabelI18nKey) }}</div>
       </template>
     </q-table>
 
     <!-- 新增与编辑窗口 -->
-    <GridEditor
-      ref="editorRef"
-      :grid="instance"
-      :url="url"
-      :request="onRequest"
-      :set-row-data-extra-property="setRowDataExtraProperty"
-      :get-row="getRow"
-    ></GridEditor>
+    <Editor ref="editorRef"></Editor>
 
     <!-- 单元格编辑窗口 -->
-    <CellEditor ref="cellEditorRef" :grid="instance" :url="url" :get-row="getRow" :row-key-name="rowKey_"></CellEditor>
+    <CellEditor ref="cellEditorRef"></CellEditor>
 
     <!-- 查看抽屉 -->
-    <GridView ref="viewRef" :grid="instance" :table-columns-map="tableColumnsMap"></GridView>
+    <ViewPanel ref="viewRef"></ViewPanel>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, nextTick, toRaw, useAttrs, getCurrentInstance, provide, watchEffect, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { axios, Environment, TreeBuilder, VueTools, Tools, eventBus } from '@/platform';
-import { getCssVar } from 'quasar';
-import { arrayToMap, OperatorTypeEnum } from '@/platform/components/utils';
-import GridTop from './GridTop.vue';
-import GridHeader from './GridHeader.vue';
-import GridBody from './GridBody.vue';
-import GridPagination from './GridPagination.vue';
-import GridEditor from './GridEditor.vue';
-import CellEditor from './CellEditor.vue';
-import GridView from './GridView.vue';
-import { selectMode as selectMode_, sortByProperties, editStatus, groupMode as groupMode_ } from './ts/grid.ts';
-
-import { columnDefaultProps } from './ts/grid.ts';
+import { $t, Tools, VueTools, eventBus } from '@/platform';
+import { getCurrentInstance, nextTick, onMounted, provide, ref, useAttrs, watch, watchEffect } from 'vue';
+import Body from './Body.vue';
+import Editor from './extra/Editor.vue';
+import CellEditor from './extra/inline-edit/CellEditor.vue';
+import ViewPanel from './extra/ViewPanel.vue';
+import Header from './Header.vue';
+import Pagination from './Pagination.vue';
+import Top from './Top.vue';
+import { Constant, EventType, GridTools, Init, ExposeApiManager } from './ts/index';
 
 const attrs = useAttrs();
-const gc = Environment.getConfigure();
-const darkBgColor = getCssVar('dark');
-const tableHeadBgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.headBgColor || '#f5f7fa';
-const tableBorderColor = gc.theme?.grid?.borderColor || 'rgba(0, 0, 0, 0.12)';
-const stickyBgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.stickyBgColor || '#ffffff';
-const onResizeRef = ref(false);
-
-const { t } = useI18n();
 const tableRef = ref();
 const topRef = ref();
 const headerRef = ref();
@@ -154,222 +91,18 @@ const editorRef = ref();
 const cellEditorRef = ref();
 const viewRef = ref();
 
-const props = defineProps({
-  height: { type: Number, default: 0 }, // 表格高度
-  title: { type: String, default: '' }, // 表格标题
-  autoFetchData: { type: Boolean, default: true }, // 自动加载数据
-  localMode: { type: Boolean, default: false }, // 本地模式，启用该模式后，除了查询数据依旧通过 autoFetchData 与 url 控制外，其他所有与后端交互的请求都失效，同时分页属性也失效
-  selectMode: { type: String, default: selectMode_.row }, // 选择模式
-  dndMode: { type: String, default: undefined }, // 拖拽数据行排序的模式，默认不可拖拽，字符串`local`为本地排序，只根据配置的字段进行本地排序，不会将数据发送至后端，字符串`server`为远程排序，拖拽完成后会将数据发送至后端。
-  dndOrderBy: { type: String, default: 'order' }, // 拖拽排序时根据哪个字段进行排序，默认为`order`字段
-  pageable: { type: Boolean, default: true }, // 是否需要分页，当启用树形表格模式时该属性失效，树形表格不支持分页。
-  configButton: { type: Boolean, default: true }, // 是否显示表格配置按钮
-  dataUrl: { type: String, default: '' }, // 表格数据操作请求的URL前缀
-  fetchDataUrl: { type: String, default: '' }, // 获取数据URL
-  addDataUrl: { type: String, default: '' }, // 新增数据url
-  editDataUrl: { type: String, default: '' }, // 修改数据url
-  removeDataUrl: { type: String, default: '' }, // 删除数据url
-  dense: { type: Boolean, default: undefined }, // 表格整体紧凑模式
-  denseHeader: { type: Boolean, default: undefined }, // 表格列标题紧凑模式
-  denseBody: { type: Boolean, default: undefined }, // 表格数据行紧凑模式
-  denseBottom: { type: Boolean, default: undefined }, // 表格底部分页栏紧凑模式
-  denseToolbar: { type: Boolean, default: true }, // 表格toolbar按钮栏紧凑模式
-  sortNo: { type: Boolean, default: false }, // 是否显示排序号
-  stickyNum: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，支持1-10列。
-  checkboxSelection: { type: Boolean, default: true }, // checkbox选择模式，默认启用
-  tickedField: { type: String, default: 'ticked' }, // 行数据中记录checkbox勾选状态的字段名
-  selectedField: { type: String, default: 'selected' }, // 行数据中记录行点击选中状态的字段名
-  tree: { type: Boolean, default: false }, // 树形表格模式，按照层级关系构建数据并以树形展现
-  treeIcon: { type: Function, default: undefined }, // 树形表格模式，图标函数，带有一个参数，行数据
-  treeDefaultExpandAll: { type: Boolean, default: false }, // 树形表格模式，树形表格数据加载后是否全部展开
-  treeTickStrategy: { type: String, default: 'leaf' }, // 树形表格模式，树勾选策略，strict：节点自己，leaf：包含子节点
-  treeRelationship: { type: String, default: 'parent' }, // 树形表格模式的数据关系，包括：parent, children，当为parent时组件根据数据主键与数据外键构建树形数据，否则需要自己构建好树形数据放到children属性中。
-  primaryKey: { type: String, default: 'id' }, // 数据主键（常规表格模式时，该字段可用作内置的编辑删除等功能对应的后端API入参，如：继承RestCrudController的update所需的入参。树形表格模式时，该字段为构建树数据的主键）
-  foreignKey: { type: String, default: 'parent' }, // 数据外键（常规表格模式时，该字段暂时无用，将来可用作多个表格的数据关系字段。树形表格模式时，该字段为构建树数据的关系字段）
-  refreshData: { type: Boolean, default: false }, // 新增、删除、修改成功后是否刷新数据列表，默认不刷新但是新增修改后台必须返回对应的行数据对象，删除则必须返回删除的记录集primaryKey集合。
-  dbClickOperation: { type: String, default: 'view' }, // 默认的双击操作：可填写内置或自定义按钮name，执行的操作为按钮对应的click，固定值提供：expand(展开双击的行)、none(双击不执行任何动作)
-  separator: { type: String, default: 'cell' }, // 表格分割线，支持：horizontal、vertical、cell、none
-  hideHeader: { type: Boolean, default: false }, // 隐藏表头
-  groupMode: { type: String, default: undefined }, // 分组模式，支持：alone、merge
-  groupStartOpen: { type: [String, Array], default: undefined }, // alone分组模式下默认展开的组，字符串支持：all、first、none，数组可配置多个组名。
-  groupByField: {
-    // 分组字段配置，当分组模式为 alone 时若配置的为数组，取数组第一个字段。
-    type: [String, Array],
-    default: () => {
-      return [];
-    },
-  },
-  appendRows: {
-    // 表格追加行，添加到当前表格数据行尾，可添加多行，支持跨行跨列配置，用于添加合计或者额外信息。
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  sortBy: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  }, // 默认排序字段，示例：['userName', '-lastModifyDate']，其中“-”开头表示倒序。
-  tickedRecord: {
-    // 默认勾选的记录，传入一个对象，包含：columnName（列名称，字符串类型，该属性不传默认根据数据主键查找）、data（需要勾选的数据，数组类型）
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  queryCriteria: {
-    // 查询条件，查询、翻页、刷新等操作都会带上的查询条件
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  columns: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  queryFormFields: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  queryFormColsNum: {
-    type: [Number, Object],
-    default: 0,
-  },
-  queryFormRowNum: { type: Number, default: 1 },
-  queryFormAttrs: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  toolbarActions: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  toolbarConfigure: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-  pagination: {
-    type: Object,
-    default: () => {
-      return {
-        reqPageStart: 0,
-        rowsPerPage: 10,
-      };
-    },
-  },
-  editor: {
-    type: Object,
-    default: () => {
-      return {
-        dialog: {},
-        form: {},
-      };
-    },
-  },
-  viewer: {
-    type: Object,
-    default: () => {
-      return {
-        drawer: {},
-        panel: {
-          fields: [],
-        },
-      };
-    },
-  },
-  // 作为form中的组件使用----start
-  showIf: {
-    type: [Boolean, Function],
-    default: () => {
-      return true;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-  // 作为form中的组件使用----end
-  onRowClick: {
-    type: Function,
-    default: undefined,
-  },
-  onRowDbClick: {
-    type: Function,
-    default: undefined,
-  },
-  onUpdateTicked: {
-    type: Function,
-    default: undefined,
-  },
-  onAfterDragAndDrop: {
-    type: Function,
-    default: undefined,
-  },
-});
-const emit = defineEmits<{
-  // 行点击事件
-  (e: 'rowClick', args: object): void;
-  // 行双击事件
-  (e: 'rowDbClick', args: object): void;
-  // 行数据checkbox勾选状态改变事件
-  (e: 'updateTicked', args: object): void;
-  // 表格列头全部勾选checkbox状态改变事件
-  (e: 'updateTickeds', args: object): void;
-  // 表格请求数据前事件
-  (e: 'beforeRequestData', args: object): void;
-  // 表格请求数据后事件
-  (e: 'afterRequestData', args: object): void;
-  // 内置新增编辑功能数据提交前触发事件
-  (e: 'beforeEditorDataSubmit', args: object): void;
-  // 内置新增编辑功能数据提交完成后触发事件
-  (e: 'afterEditorDataSubmit', args: object): void;
-  // 内置删除功能提交完成前回调函数
-  (e: 'beforeRemove', args: object): void;
-  // 内置删除功能提交完成后回调函数
-  (e: 'afterRemove', args: object): void;
-  // 新增窗口打开之后
-  (e: 'afterEditorOpen', args: object): void;
-  // 行拖拽排序完成后
-  (e: 'afterDragAndDrop', args: object): void;
-}>();
-
-const rawColumns = ref(props.columns);
-const tableColumnsMap = ref(arrayToMap('name', rawColumns.value));
-const rowKey_ = '_rowKey_'; // 行数据中前端附加的UUID字段名
-const queryFormFieldsMap = arrayToMap('name', props.queryFormFields);
-const tableColumns = ref(columnDefaultProps(rawColumns.value, props.sortNo));
-const url = {
-  dataUrl: props.dataUrl,
-  fetchDataUrl: props.fetchDataUrl,
-  addDataUrl: props.addDataUrl,
-  editDataUrl: props.editDataUrl,
-  removeDataUrl: props.removeDataUrl,
-};
-
-const columnsComputed = computed(() => {
-  return tableColumns.value;
-});
+const props = defineProps(Init.createProps());
+const emit = defineEmits<EventType>();
+// 实例化表格工具类 tools
+const tools = new GridTools(props);
 
+// 列监听，当列发生变化后重新执行初始化及多表头处理
 watch(
   () => props.columns,
   (newVal, oldVal) => {
-    rawColumns.value = newVal;
-    tableColumns.value = columnDefaultProps(rawColumns.value, props.sortNo);
-    table.columns = tableColumns.value;
-    if (tableColumns.value && tableColumns.value.length > rawColumns.value.length) {
+    tools.table.originalColumns = newVal;
+    tools.table.columns = Init.initColumn(tools.table.originalColumns, props);
+    if (tools.table.columns && tools.table.columns.length > tools.table.originalColumns.length) {
       headerRef.value?.handlerMoreRowColumnTitle();
     }
   },
@@ -377,1499 +110,113 @@ watch(
 
 eventBus.on('onLocaleChanged', (local) => {
   nextTick(() => {
-    topRef.value?.handlerQueryFormShowField();
+    topRef.value?.handleQueryFormShowField();
     topRef.value?.setLocaleFlag();
-    table.columns = tableColumns.value;
     // 重构内置按钮 label
     topRef.value?.resetLabel();
     topRef.value?.handleToolbarActions();
     // 重构内置新增编辑窗口中的按钮 label
     editorRef.value?.resetButtonLabel();
-    refreshStyle();
-  });
-});
-
-const table = reactive({
-  separator: props.separator,
-  dragRecords: [],
-  dragRow: {},
-  tickedField: props.tickedField,
-  selectedField: props.selectedField,
-  spaceHeight: 4,
-  allTicked: <null | boolean>false,
-  gridConfig: false,
-  stickyNum: props.stickyNum,
-  columns: tableColumns.value,
-  treeExpand: props.treeDefaultExpandAll,
-  checkboxSelection: props.checkboxSelection,
-  sortNo: props.sortNo,
-  dense: props.dense !== undefined ? props.dense : false,
-  denseToolbar: props.denseToolbar !== undefined ? props.denseToolbar : false,
-  denseHeader: props.denseHeader !== undefined ? props.denseHeader : false,
-  denseBody: props.denseBody !== undefined ? props.denseBody : false,
-  denseBottom: props.denseBottom !== undefined ? props.denseBottom : false,
-  rows: <any>[],
-  inFullscreen: false, // 表格当前是否为全屏模式
-  bodyEditStatus: 'none', // 表格内容区编辑状态：none(不处于编辑状态)、cellEdit(单元格编辑状态)、rowEdit(行编辑状态)、rowsEdit(所有行编辑状态)
-  cellSelected: {}, // 单元格选中记录
-  mergeRecords: {}, // 行数据合并记录
-});
-provide('table', table);
-
-const showIfComputed = computed(() => {
-  if (typeof props.showIf === 'function') {
-    return props.showIf({
-      value: null,
-      form: props.form,
-    });
-  } else {
-    return props.showIf;
-  }
-});
-
-const denseHeaderComputed = computed(() => {
-  if (table.denseHeader) {
-    return true;
-  } else if (table.dense !== false) {
-    return true;
-  } else {
-    return false;
-  }
-});
-const denseBodyComputed = computed(() => {
-  if (table.denseBody) {
-    return true;
-  } else if (table.dense !== false) {
-    return true;
-  } else {
-    return false;
-  }
-});
-const denseBottomComputed = computed(() => {
-  if (table.denseBottom) {
-    return true;
-  } else if (table.dense !== false) {
-    return true;
-  } else {
-    return false;
-  }
-});
-const visibleColumnsComputed = computed(() => {
-  const visibleColumns: string[] = [];
-  table.columns.forEach((item) => {
-    if (!props.tree || (props.tree && item.name !== '_sortNo_')) {
-      if (Tools.isEmpty(item.showIf)) {
-        visibleColumns.push(item.name);
-      } else if (typeof item.showIf === 'boolean' && item.showIf) {
-        visibleColumns.push(item.name);
-      }
-    }
+    tools.opFM.resetStyleVariableValue();
   });
-  return visibleColumns;
-});
-
-const state = reactive({
-  noDataLabel: t('tip.noData'),
-  loading: false,
-  loadingLabel: t('tip.dataLoading'),
-  bodyCellHeight: denseBodyComputed.value ? 24 : 48,
-  // 表格响应式高宽
-  refHeightWidth: {
-    yLocation: 0, // 表格当前所在Y轴位置
-    noDataTrYLocation: 0, // 无数据提示行所在Y轴位置
-    topHeight: 0, // 表格当前top区域高度（表格列头上方区域）
-    bottomHeight: 0, // 表格当前bottom区域高度（无可用数据、分页那块区域）
-    middleWidth: 0, // 表格当前middle区域宽度（表格列头及数据行区域）
-    middleScrollWidth: 0, // 表格出现滚动条时的宽度，若无滚动条则与 middleWidth 一致
-    middleHeight: 0, // 表格当前middle区域高度(表格列头及数据行区域)
-    columnHeadHeight: 0, // 表格当前列头高度
-    titleTotalHeight: 0, // 当前表格title排除无数据行的总高度
-    hideHeaderNoDataHeight: 0, // 隐藏表头时无数据提示区域高度
-  },
-  pagination: {
-    config: {
-      boundaryLinks: true, // 显示边界按钮链接
-      boundaryNumbers: false, // 始终显示第一页和最后一页按钮（如果不使用“输入”）
-      directionLinks: false, // 显示方向按钮
-      ellipses: false, // 页面可用时显示省略号
-      maxPages: 5, // 一次显示的最大页面链接数；0表示无限
-    },
-    sortBy: '',
-    descending: false,
-    reqPageStart: props.pagination.reqPageStart || 0,
-    page: 1,
-    rowsPerPage: props.pagination.rowsPerPage || 10,
-    rowsNumber: 10,
-    rowsPerPageOptions: [5, 10, 20, 50, 100],
-  },
-});
-
-const selectionComputed = computed(() => {
-  if (attrs.selection && attrs.selection === 'single') {
-    return 'single';
-  } else {
-    return 'multiple';
-  }
-});
-
-const tableHeightComputed = computed(() => {
-  onResizeRef.value;
-  let availableHeight = 0;
-  const parentHtmlElement = tableRef?.value?.$el?.parentElement;
-  if (parentHtmlElement) {
-    availableHeight = Math.floor(parentHtmlElement.clientHeight);
-  }
-
-  availableHeight -= state.refHeightWidth.topHeight || 0;
-  availableHeight -= state.refHeightWidth.bottomHeight || 0;
-  availableHeight -= table.spaceHeight || 0;
-
-  const style = {
-    height: props.height > 0 ? props.height + 'px' : availableHeight > 0 ? availableHeight + 'px' : '0px',
-  };
-  return style;
-});
-
-const excludeColumnNum = computed(() => {
-  let num = 0;
-  if (props.tree) {
-    return num;
-  }
-  if (table.sortNo) {
-    num += 1;
-  }
-  if (table.checkboxSelection) {
-    num += 1;
-  }
-  return num;
 });
 
-const noDataTrHeightComputed = computed(() => {
-  onResizeRef.value;
-  let availableHeight = 0;
-  let otherHeight = 0;
-  let otherHeight2 = 0;
-
-  const parentHtmlElement = tableRef?.value?.$el?.parentElement;
-  if (parentHtmlElement) {
-    availableHeight = Math.floor(parentHtmlElement.clientHeight);
-  }
-
-  otherHeight += state.refHeightWidth.topHeight || 0;
-  otherHeight += state.refHeightWidth.bottomHeight || 0;
-  otherHeight += table.spaceHeight || 0;
-
-  otherHeight2 += state.refHeightWidth.titleTotalHeight;
-  otherHeight2 += state.refHeightWidth.middleScrollWidth - state.refHeightWidth.middleWidth > 0 ? 15 : 0;
-
-  availableHeight -= otherHeight + otherHeight2;
-  availableHeight -= 1; //无数据增加的title行，下边框所占边框
-
-  const style = {
-    height: props.height > 0 ? props.height - otherHeight2 - 1 + 'px' : availableHeight > 0 ? availableHeight + 'px' : '0px',
-  };
-  return style;
-});
-const hideHeaderAndNoDataStyleComputed = computed(() => {
-  return {
-    height: state.refHeightWidth.hideHeaderNoDataHeight + 'px',
-    display: 'flex',
-    'align-items': 'center',
-    'justify-content': 'center',
-  };
-});
-
-const noDataTrColspanComputed = computed(() => {
-  let colspan = excludeColumnNum.value;
-  colspan += visibleColumnsComputed.value.length;
-  return colspan;
-});
-
-// 表格进入全屏模式时所在Y轴会变成0，退出时也无法准确获得，最终导致出现滚动条，需要在进入全屏时记录Y轴位置。
-let tableY = 0;
-let noDataTrY = 0;
-const tableFullscreenFun = (value) => {
-  table.inFullscreen = !table.inFullscreen;
-  if (value) {
-    tableY = state.refHeightWidth.yLocation;
-    noDataTrY = state.refHeightWidth.noDataTrYLocation;
-  } else {
-    state.refHeightWidth.yLocation = tableY;
-    state.refHeightWidth.noDataTrYLocation = noDataTrY;
-    tableY = 0;
-    noDataTrY = 0;
-  }
-};
-
-const rowClick = (evt: any, row: any, index: any) => {
-  const selected = getSelectedRow();
-  if (props.localMode && table.bodyEditStatus !== editStatus.none && props.selectMode === selectMode_.row && selected && row[rowKey_] !== selected[rowKey_]) {
-    // 退出编辑状态
-    table.bodyEditStatus = editStatus.none;
-  } else if (table.bodyEditStatus === editStatus.none && props.selectMode !== selectMode_.none) {
-    // 非树形表格行点击选中与checkbox绑定，即行选中时checkbox也勾选，checkbox勾选时行选中。
-    if (!evt.ctrlKey) {
-      clearSelected();
-      clearTicked();
-    }
-    row[table.selectedField] = true;
-    row[table.tickedField] = true;
-    allTickedStatus();
-    if (props.onRowClick) {
-      emit('rowClick', { grid: instance, evt, row, index });
-    }
-  }
-};
-const rowDbClick = (evt, row, index) => {
-  if (table.bodyEditStatus === 'none' && props.selectMode !== selectMode_.none) {
-    if (props.onRowDbClick) {
-      emit('rowDbClick', { grid: instance, evt, row, index });
-    } else if (props.dbClickOperation === 'view') {
-      viewRef.value?.view();
-    } else if (props.dbClickOperation !== 'none') {
-      topRef.value?.dbClickOperation(row);
-    }
-  }
-};
-
-const onResize = () => {
-  onResizeRef.value = !onResizeRef.value;
-  topRef.value?.handlerQueryFormShowField();
-  if (tableRef.value) {
-    state.refHeightWidth.yLocation = tableRef.value.$el.getBoundingClientRect().y;
-    if (tableRef.value.$el.getElementsByClassName('noDataTr').length > 0) {
-      state.refHeightWidth.noDataTrYLocation = tableRef.value.$el.getElementsByClassName('noDataTr')[0].getBoundingClientRect().y;
-    }
-    state.refHeightWidth.topHeight = tableRef.value.$el.getElementsByClassName('q-table__top')[0]?.clientHeight;
-    state.refHeightWidth.middleWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientWidth;
-    state.refHeightWidth.middleScrollWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
-    state.refHeightWidth.columnHeadHeight = tableRef.value.$el.getElementsByTagName('thead')[0]?.clientHeight;
-    state.refHeightWidth.hideHeaderNoDataHeight = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientHeight;
-    // 判断是否有数据，没数据修改 middleHeight
-    if ((table.rows && table.rows.length > 0) || attrs['hide-bottom']) {
-      state.refHeightWidth.middleHeight = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientHeight;
-    } else {
-      let scrollHeight = 0;
-      if (state.refHeightWidth.middleScrollWidth - state.refHeightWidth.middleWidth > 0) {
-        scrollHeight = 15;
-      }
-      state.refHeightWidth.middleHeight = state.refHeightWidth.columnHeadHeight + scrollHeight;
-    }
-    let titleTotalHeight = tableRef.value.$el.getElementsByTagName('thead')[0]?.offsetHeight;
-    // 无数据时列头会增加一行，多表头的top距离计算会出错，需减掉多出来的提示行。
-    if (table.rows.length === 0) {
-      const noDataTrHeight = tableRef.value.$el.getElementsByClassName('noDataTr')[0]?.offsetHeight;
-      if (titleTotalHeight && titleTotalHeight > 0) {
-        titleTotalHeight = titleTotalHeight - noDataTrHeight;
-      } else {
-        titleTotalHeight = noDataTrHeight;
-      }
-    }
-    state.refHeightWidth.titleTotalHeight = titleTotalHeight;
-  }
-};
-
-let queryCriteria = { ...props.queryCriteria };
-const buildCriteria = (value, fieldName) => {
-  const queryOperator = queryFormFieldsMap.get(fieldName)['queryOperator'];
-  if (!Tools.isEmpty(queryOperator)) {
-    return {
-      fieldName: fieldName,
-      operator: queryOperator,
-      value: value,
-    };
-  } else if (typeof value === 'boolean' || typeof value === 'number' || (typeof value === 'string' && queryFormFieldsMap.get(fieldName)['type'] === 'w-date')) {
-    return {
-      fieldName: fieldName,
-      operator: OperatorTypeEnum.equals,
-      value: value,
-    };
-  } else if (Array.isArray(value)) {
-    return {
-      fieldName: fieldName,
-      operator: OperatorTypeEnum.inSet,
-      value: value,
-    };
-  } else if (typeof value === 'object' && queryFormFieldsMap.get(fieldName)['type'] === 'w-date-range') {
-    return {
-      fieldName: fieldName,
-      operator: OperatorTypeEnum.betweenInclusive,
-      start: value['from'],
-      end: value['to'],
-    };
-  } else {
-    return {
-      fieldName: fieldName,
-      operator: OperatorTypeEnum.contains,
-      value: value,
-    };
-  }
-};
-
-// 构建 criteria 查询
-const buildQueryCriterias = (reqParams) => {
-  const urlSearchParams = new URLSearchParams(reqParams);
-  // 处理默认查询条件
-  if (Object.keys(queryCriteria).length > 0) {
-    urlSearchParams.append('criteria', JSON.stringify(queryCriteria));
-  }
-  const queryForm = topRef.value?.getQueryForm();
-  if (queryForm) {
-    nextTick(() => {
-      const queryFormData = queryForm.getData();
-      Object.keys(queryFormData).forEach((item) => {
-        if (
-          (!Tools.isEmpty(queryFormData[item]) && !Array.isArray(queryFormData[item])) ||
-          (!Tools.isEmpty(queryFormData[item]) && Array.isArray(queryFormData[item]) && queryFormData[item].length > 0)
-        ) {
-          // 根据数据进行operator处理
-          const criteria = buildCriteria(queryFormData[item], item);
-          urlSearchParams.append('criteria', JSON.stringify(criteria));
-        }
-      });
-    });
-  }
-  return urlSearchParams;
-};
-
-const requestHandler = async (ops) => {
-  const reqParams: any = {};
-  if (props.pageable && !props.tree && !props.localMode) {
-    reqParams.page = ops.pagination.page;
-    reqParams.size = ops.pagination.rowsPerPage;
-  }
-  reqParams.pageable = props.tree || props.localMode ? false : props.pageable;
-  if (ops.pagination.sortBy && ops.pagination.sortBy !== '') {
-    if (ops.pagination.descending) {
-      reqParams.sortBy = '-' + ops.pagination.sortBy;
-      reqParams.descending = ops.pagination.descending;
-    } else {
-      reqParams.sortBy = ops.pagination.sortBy;
-    }
-  } else if (props.sortBy && props.sortBy.length > 0) {
-    reqParams.sortBy = props.sortBy;
-  }
-
-  // 后台 RestCrudController 查询
-  let urlSearchParams = buildQueryCriterias(reqParams);
-  // const urlSearchParams = buildQueryEntity(reqParams);
-  emit('beforeRequestData', {
-    grid: instance,
-    data: urlSearchParams,
-    callback: (handlerRequestParams: URLSearchParams | any) => {
-      urlSearchParams = handlerRequestParams;
-    },
-  });
-  const resp = await axios.get(url.fetchDataUrl || url.dataUrl, { params: urlSearchParams }).catch((error) => {
-    console.info('error-------------', error);
-    state.loading = false;
-  });
-  return resp;
-};
-
-const expandDatas = <any>[];
-const extractExpandStatus = (arr) => {
-  arr.forEach((item) => {
-    if (item[rowDataExtraPropertyName.expand]) {
-      expandDatas.push(item[props.primaryKey]);
-    }
-    if (item.children?.length > 0) {
-      extractExpandStatus(item.children);
-    }
-  });
-};
-
-const onRequest = async (ops: any) => {
-  table.bodyEditStatus = 'none';
-  state.loading = true;
-  const resp: any = await requestHandler(ops);
-  state.loading = false;
-  if (resp && resp.data && !props.tree) {
-    const responseData = resp.data;
-    if (Array.isArray(responseData)) {
-      table.rows = responseData;
-      state.pagination.rowsNumber = responseData.length;
-    } else if (typeof responseData === 'object' && responseData.content) {
-      if (props.pageable) {
-        state.pagination.page = state.pagination.reqPageStart === 0 ? responseData.number + 1 : responseData.number;
-        state.pagination.rowsPerPage = responseData.size || state.pagination.rowsPerPage;
-      }
-      state.pagination.rowsNumber = responseData.totalElements;
-      table.rows = responseData.content;
-    } else {
-      table.rows = [];
-    }
-  } else if (resp && resp.data && props.tree) {
-    if (!table.treeExpand && table.rows.length > 0) {
-      expandDatas.splice(0, expandDatas.length);
-      extractExpandStatus(toRaw(table.rows));
-    }
-    const responseData = resp.data;
-    if (Array.isArray(responseData)) {
-      state.pagination.rowsNumber = responseData.length;
-      state.pagination.rowsPerPage = 0;
-      if (props.treeRelationship === 'parent') {
-        const treeRows = TreeBuilder.build(responseData, props.foreignKey, props.primaryKey);
-        table.rows = treeRows;
-      } else {
-        table.rows = responseData;
-      }
-    } else if (typeof responseData === 'object' && responseData.content) {
-      state.pagination.rowsNumber = responseData.content.length;
-      state.pagination.rowsPerPage = 0;
-      if (props.treeRelationship === 'parent') {
-        const treeRows = TreeBuilder.build(responseData.content, props.foreignKey, props.primaryKey);
-        table.rows = treeRows;
-      } else {
-        table.rows = responseData.content;
-      }
-    }
-  } else {
-    table.rows = [];
-  }
-  state.pagination.sortBy = ops.pagination.sortBy;
-  state.pagination.descending = ops.pagination.descending;
-  setRowDataExtraProperty(table.rows);
-  allTickedStatus();
-  refreshStyle(100);
-  emit('afterRequestData', { grid: instance, rows: toRaw(table.rows) });
-  // 判断数据加载后是否默认展开，是的话直接展开树形表格
-  if (table.treeExpand) {
-    expandFun(table.rows, false);
-  }
-};
-
-// 处理当前页所有数据勾选状态
-const allTickedStatus = () => {
-  // 存在一条勾选的记录设置为 null
-  // 一条勾选的记录都没有设置为 false
-  // 全部勾选设置为 true
-  if (props.checkboxSelection) {
-    const ticked_ = <any>[];
-    table.rows.forEach((item) => {
-      if (item[table.tickedField]) {
-        ticked_.push(item);
-      }
-    });
-    if (ticked_.length === table.rows.length && table.rows.length > 0) {
-      table.allTicked = true;
-    } else if (ticked_.length > 0) {
-      table.allTicked = null;
-    } else {
-      table.allTicked = false;
-    }
-  }
-};
-
-const getInitRowTicked = (rowData) => {
-  if (rowData[rowDataExtraPropertyName.ticked]) {
-    return true;
-  } else if (Object.keys(props.tickedRecord).length > 0 && props.tickedRecord['data']?.length > 0) {
-    const columnName = props.tickedRecord['columnName'] || props.primaryKey;
-    const data = props.tickedRecord['data'];
-    if (
-      data.findIndex((item) => {
-        return item === rowData[columnName];
-      }) > -1
-    ) {
-      return true;
-    }
-  }
-  return false;
-};
-const getInitRowSelected = (rowData) => {
-  if (rowData[rowDataExtraPropertyName.selected]) {
-    return true;
-  } else if (!props.tree && rowData[rowDataExtraPropertyName.ticked]) {
-    return true;
-  } else if (props.tree && !props.checkboxSelection && rowData[rowDataExtraPropertyName.ticked]) {
-    return true;
-  } else {
-    return false;
-  }
-};
-
-/**
- * 行数据附加属性名称
- */
-const rowDataExtraPropertyName = {
-  rowKey: rowKey_, // 前端行数据ID
-  ticked: table.tickedField, // 行数据勾选状态
-  selected: table.selectedField, // 行数据选中状态
-  expand: 'expand', // 树表格行数据展开状态
-  tickedCount: '_tickedCount', // 行数据用于处理父节点勾选状态的属性（记录自身勾选数量，要么为0要么为1）
-  childrenTickedCount: '_childrenTickedCount', // 行数据用于处理父节点勾选状态的属性（记录子节点勾选数量）
-  rowOldValue: '_rowOldValue', // 行数据被编辑前的值
-};
-/**
- * 初始化行数据附加属性
- * @param rowData 行数据对象
- */
-const initRowDataExtraProperty = (rowData) => {
-  rowData[rowDataExtraPropertyName.rowKey] = Tools.uuid();
-  rowData[rowDataExtraPropertyName.ticked] = getInitRowTicked(rowData);
-  rowData[rowDataExtraPropertyName.selected] = getInitRowSelected(rowData);
-  rowData[rowDataExtraPropertyName.rowOldValue] = {};
-  setOldValue(rowData);
-  if (props.tree) {
-    if (expandDatas.length > 0 && expandDatas.includes(rowData[props.primaryKey])) {
-      rowData[rowDataExtraPropertyName.expand] = true;
-    } else if (Tools.isEmpty(rowData[rowDataExtraPropertyName.expand])) {
-      rowData[rowDataExtraPropertyName.expand] = false;
-    }
-  }
-};
-/**
- * 设置行数据附加属性
- * @param rows 数据行集合
- */
-const setRowDataExtraProperty = (rows: []) => {
-  if (props.groupMode === groupMode_.merge && !props.tree) {
-    // 如果存在需要合并的字段，并且不是树表格，重新对数据进行排序
-    table.mergeRecords = {};
-    // sortByProperties(rows, mergeColumns);
-  }
-  if (rows && rows.length > 0) {
-    rows.forEach((item: any, index) => {
-      initRowDataExtraProperty(item);
-      addMergeRecords(item);
-      if (item[rowDataExtraPropertyName.ticked] === true) {
-        item[rowDataExtraPropertyName.tickedCount] = 1;
-      } else if (item[rowDataExtraPropertyName.tickedCount] === false) {
-        item[rowDataExtraPropertyName.tickedCount] = 0;
-      } else {
-        item[rowDataExtraPropertyName.tickedCount] = 0;
-      }
-      if (props.tree && item.children && item.children.length > 0) {
-        setRowDataExtraProperty(item.children);
-        item[rowDataExtraPropertyName.childrenTickedCount] = 0;
-        item.children.forEach((child) => {
-          item[rowDataExtraPropertyName.childrenTickedCount] += child[rowDataExtraPropertyName.tickedCount];
-        });
-        if (item[rowDataExtraPropertyName.childrenTickedCount] === 0) {
-          item[rowDataExtraPropertyName.ticked] = false;
-          item[rowDataExtraPropertyName.tickedCount] = 0;
-        } else if (item[rowDataExtraPropertyName.childrenTickedCount] === item.children.length) {
-          item[rowDataExtraPropertyName.ticked] = true;
-          item[rowDataExtraPropertyName.tickedCount] = 1;
-        } else {
-          item[rowDataExtraPropertyName.ticked] = null;
-          item[rowDataExtraPropertyName.tickedCount] = 0;
-        }
-      }
-    });
-  }
-};
-const setOldValue = (rowData) => {
-  const values = Object.values(rowDataExtraPropertyName);
-  Object.keys(rowData).forEach((key) => {
-    if (
-      values.findIndex((item) => {
-        return item === key;
-      }) < 0
-    ) {
-      rowData[rowDataExtraPropertyName.rowOldValue][key] = toRaw(rowData[key]);
-    }
-  });
-};
-/**
- * name: { 上海: [2,4], 北京: [3,5,1] }
- * desc: { 天安门: [5,1] }
- */
-const addMergeRecords = (rowData) => {
-  // if (mergeColumns.length > 0 && !props.tree) {
-  //   mergeColumns.forEach((columnName) => {
-  //     const tmpArr = [rowData[rowDataExtraPropertyName.rowKey]];
-  //     if (table.mergeRecords[columnName]) {
-  //       if (table.mergeRecords[columnName][rowData[columnName]]) {
-  //         table.mergeRecords[columnName][rowData[columnName]].push(rowData[rowDataExtraPropertyName.rowKey]);
-  //       } else {
-  //         table.mergeRecords[columnName][rowData[columnName]] = tmpArr;
-  //       }
-  //     } else {
-  //       table.mergeRecords[columnName] = { [rowData[columnName]]: tmpArr };
-  //     }
-  //   });
-  // }
-};
-
+// url 及 紧凑模式监听
 watchEffect(() => {
-  url.dataUrl = props.dataUrl;
-  url.fetchDataUrl = props.fetchDataUrl;
-  url.addDataUrl = props.addDataUrl;
-  url.editDataUrl = props.editDataUrl;
-  url.removeDataUrl = props.removeDataUrl;
+  tools.table.url.dataUrl = props.dataUrl;
+  tools.table.url.fetchDataUrl = props.fetchDataUrl;
+  tools.table.url.addDataUrl = props.addDataUrl;
+  tools.table.url.editDataUrl = props.editDataUrl;
+  tools.table.url.removeDataUrl = props.removeDataUrl;
 
   let flag = false;
   if (props.dense !== undefined) {
-    table.dense = props.dense;
+    tools.table.configStore.dense = props.dense;
     flag = true;
   }
   if (props.denseToolbar !== undefined) {
-    table.denseToolbar = props.denseToolbar;
+    tools.table.configStore.denseToolbar = props.denseToolbar;
     flag = true;
   }
   if (props.denseHeader !== undefined) {
-    table.denseHeader = props.denseHeader;
+    tools.table.configStore.denseHeader = props.denseHeader;
     flag = true;
   }
   if (props.denseBody !== undefined) {
-    table.denseBody = props.denseBody;
+    tools.table.configStore.denseBody = props.denseBody;
     flag = true;
   }
   if (props.denseBottom !== undefined) {
-    table.denseBottom = props.denseBottom;
+    tools.table.configStore.denseBottom = props.denseBottom;
     flag = true;
   }
   if (flag && tableRef?.value) {
-    refreshStyle(10);
+    tools.opFM.resetStyleVariableValue(10);
   }
 });
 
-const tableClassComputed = computed(() => {
-  const classArr = <string[]>['sticky-header-column-table'];
-  if (table.stickyNum && table.stickyNum > 0) {
-    if (headerRef.value?.getColumnTitleState()?.columnTitleRowNum > 1) {
-      // 存在多行列头
-      const stickyColumn = rawColumns.value.filter((item, index) => {
-        return index < table.stickyNum;
-      });
-      let tdNum = excludeColumnNum.value;
-      stickyColumn.forEach((item: any, index: number) => {
-        tdNum += headerRef.value?.getMoreColumnTitleMap()?.get(item.name)?.colspan;
-      });
-      // 处理表格数据列锁定
-      if (tdNum > 0) {
-        for (let n = 1; n <= tdNum; n++) {
-          classArr.push('sticky-header-column-table-td-' + n);
-        }
-      }
-    } else {
-      // 不存在多行列头
-      if (excludeColumnNum.value === 2) {
-        classArr.push('sticky-header-column-table-tr-1' + '-' + 1);
-        classArr.push('sticky-header-column-table-tr-1' + '-' + 2);
-        classArr.push('sticky-header-column-table-td-' + 1);
-        classArr.push('sticky-header-column-table-td-' + 2);
-      } else if (excludeColumnNum.value === 1) {
-        classArr.push('sticky-header-column-table-tr-1' + '-' + 1);
-        classArr.push('sticky-header-column-table-td-' + 1);
-      }
-      for (let i = 1; i <= table.stickyNum; i++) {
-        classArr.push('sticky-header-column-table-tr-1' + '-' + (i + excludeColumnNum.value));
-        classArr.push('sticky-header-column-table-td-' + (i + excludeColumnNum.value));
-      }
-    }
-  }
-  return classArr;
-});
-
-const afterDragAndDrop = (updateData) => {
-  if (!Tools.isUndefined(props.onAfterDragAndDrop)) {
-    emit('afterDragAndDrop', { grid: instance, data: updateData });
-  }
-};
-
+// 表格挂载完成后钩子函数
 onMounted(() => {
-  if (tableColumns.value && tableColumns.value.length > rawColumns.value.length) {
+  tools.opFM.propsValidate();
+  if (tools.table.columns?.length > tools.table.originalColumns?.length) {
     headerRef.value?.handlerMoreRowColumnTitle();
   }
-  topRef.value?.handlerQueryFormShowField();
+  topRef.value?.handleQueryFormShowField();
   if (props.autoFetchData && (!Tools.isEmpty(props.dataUrl) || !Tools.isEmpty(props.fetchDataUrl))) {
-    onRequest({
-      pagination: state.pagination,
+    tools.reqApiFM.fetchData({
+      pagination: tools.table.store.pagination,
     });
   } else {
-    refreshStyle();
+    tools.opFM.resetStyleVariableValue();
   }
 });
 
-/**
- * 获取表格中的行记录
- * @param arr 查找的记录集
- * @param key 查找的 key
- * @param parentFlag 根据 foreignKey 查找记录标识
- * @param fieldName 查找的字段名，默认为前端生成的唯一ID
- */
-const getRow = (arr, key, parentFlag: boolean, fieldName: string = rowKey_) => {
-  let result = undefined;
-  for (let i = 0; i < arr.length; i++) {
-    let item = arr[i];
-    if (parentFlag ? item[props.primaryKey] === key : item[fieldName] === key || item[props.primaryKey] === key) {
-      result = item;
-      break;
-    } else if (props.tree && item.children && item.children.length > 0) {
-      const temp = getRow(item.children, key, parentFlag);
-      if (temp) {
-        result = temp;
-      }
-    }
-  }
-  return result;
-};
-
-// 根据传入的数据获取表格行记录，返回数组
-const getGridRows = (target) => {
-  const result = [];
-  if (target && Array.isArray(target) && target.length > 0) {
-    target.forEach((item) => {
-      getGridRowsKeyIsEmptyError(item);
-      const row = getRow(
-        table.rows,
-        typeof item === 'object' ? item[props.primaryKey] || item[rowKey_] : item,
-        false,
-        item[props.primaryKey] ? props.primaryKey : rowKey_,
-      );
-      if (row) {
-        result.push(row);
-      } else {
-        getGridRowsKeyNotExistError(typeof item === 'object' ? item[props.primaryKey] || item[rowKey_] : item);
-      }
-    });
-  } else if (!Tools.isEmpty(target)) {
-    const row = getRow(
-      table.rows,
-      typeof target === 'object' ? target[props.primaryKey] : target,
-      false,
-      target[props.primaryKey] ? target.primaryKey : rowKey_,
-    );
-    if (row) {
-      result.push(row);
-    } else {
-      getGridRowsKeyNotExistError(typeof target === 'object' ? target[props.primaryKey] || target[rowKey_] : target);
-    }
-  }
-  return result;
-};
-const getGridRowsKeyIsEmptyError = (data) => {
-  if (typeof data === 'object' && Tools.isEmpty(data[props.primaryKey]) && Tools.isEmpty(data[rowKey_])) {
-    throw new Error('Data does not contain `primaryKey` or `rowKey`.');
-  }
-};
-const getGridRowsKeyNotExistError = (data) => {
-  throw new Error('`' + data + '` Not Found in Data Row.');
-};
-
-// =========获取数据相关API=========start
-/**
- * 获取表格所有数据
- * @return 数组
- */
-const getRows = () => {
-  return toRaw(table.rows);
-};
-const getSelectRowsByFieldName = (arr, selectedRows, fieldName, containsNullStatus: boolean = false) => {
-  arr.forEach((item) => {
-    if (containsNullStatus && (item[fieldName] || item[fieldName] === null)) {
-      selectedRows.push(item);
-    } else if (item[fieldName]) {
-      selectedRows.push(item);
-    }
-    if (props.tree && item.children && item.children.length > 0) {
-      getSelectRowsByFieldName(item.children, selectedRows, fieldName);
-    }
-  });
-};
-/**
- * 获取单条选中记录
- * @return 行数据对象
- */
-const getSelectedRow = () => {
-  const selectedRows = [];
-  getSelectRowsByFieldName(table.rows, selectedRows, table.selectedField);
-  if (selectedRows && selectedRows.length > 0) {
-    return toRaw(selectedRows)[0];
-  } else {
-    return undefined;
-  }
-};
-/**
- * 获取所有选中记录
- * @return 数组
- */
-const getSelectedRows = () => {
-  const selectedRows = [];
-  getSelectRowsByFieldName(table.rows, selectedRows, table.selectedField);
-  return toRaw(selectedRows);
-};
-/**
- * 获得单条checkbox勾选的记录
- * @param containsNullStatus 是否包含半勾选状态的记录
- * @return 行数据对象
- */
-const getTickedRow = (containsNullStatus: boolean = false) => {
-  const tickedRows = [];
-  getSelectRowsByFieldName(table.rows, tickedRows, table.tickedField, containsNullStatus);
-  if (tickedRows && tickedRows.length > 0) {
-    return toRaw(tickedRows)[0];
-  } else {
-    return undefined;
-  }
-};
-/**
- * 获得checkbox勾选的所有记录
- * @param containsNullStatus 是否包含半勾选状态的记录
- * return 数组
- */
-const getTickedRows = (containsNullStatus: boolean = false) => {
-  const tickedRows = [];
-  getSelectRowsByFieldName(table.rows, tickedRows, table.tickedField, containsNullStatus);
-  return toRaw(tickedRows);
-};
-const getCascadeChildrenData = (rows: [], propertyName) => {
-  const data = <any>[];
-  if (rows && rows.length > 0) {
-    rows.forEach((item: any, index) => {
-      data.push(propertyName ? item[propertyName] : item);
-      if (props.tree && item.children && item.children.length > 0) {
-        const childrenData = getCascadeChildrenData(item.children, propertyName);
-        data.push(...childrenData);
-      }
-    });
-  }
-  return data;
-};
-/**
- * 获得选中的单元格
- */
-const getSelectedCell = () => {
-  return {
-    row: table.cellSelected['row'],
-    colName: table.cellSelected['colName'],
-    value: table.cellSelected['value'],
-  };
-};
-/**
- * 获取选择的行记录及所有子记录
- * @param propertyName 属性名称
- * @return 若传入了属性名称，则返回属性对应的数据数组
- *         若没有传入属性名称，返回行数据对象数组
- */
-const getCascadeChildren = (propertyName: string) => {
-  return getCascadeChildrenData([getSelectedRow()], propertyName);
-};
-const getCascadeParentsData = (row, propertyName) => {
-  const data = <any>[];
-  if (row && row[props.foreignKey]) {
-    const parent = getRow(table.rows, row[props.foreignKey], true);
-    if (parent) {
-      data.push(propertyName ? parent[propertyName] : parent);
-      if (parent[props.foreignKey]) {
-        const parentData = getCascadeParentsData(parent, propertyName);
-        data.push(...parentData);
-      }
-    }
-  }
-  return data;
-};
-/**
- * 获取选中的行记录及所有父记录
- * @param propertyName 属性名称
- * @return 若传入了属性名称，则返回属性对应的数据数组
- *         若没有传入属性名称，返回行数据对象数组
- */
-const getCascadeParents = (propertyName: string) => {
-  const row = getSelectedRow();
-  const parent = getCascadeParentsData(row, propertyName);
-  const result = <any>[propertyName ? row[propertyName] : row];
-  if (parent && parent.length > 0) {
-    result.push(...parent);
-  }
-  return result;
-};
-// =========获取数据相关API=========end
-
-// =========获取内置组件ref对象相关API=========start
-const getQueryForm = () => {
-  return topRef.value?.getQueryForm();
-};
-const getEditorDialog = () => {
-  return editorRef.value?.getDialog();
-};
-const getCellEditorDialog = () => {
-  return cellEditorRef.value?.getDialog();
-};
-const getEditorForm = () => {
-  return editorRef.value?.getForm();
-};
-const getCellEditorForm = () => {
-  return cellEditorRef.value?.getForm();
-};
-const getViewerDrawer = () => {
-  return viewRef.value?.getViewerDrawer();
-};
-const getViewerPanel = () => {
-  return viewRef.value?.getInfoPanel();
-};
-// =========获取内置组件ref对象相关API=========end
-
-// =========表格操作相关API=========start
-const setSelectedStatus = (arr, status) => {
-  arr.forEach((item) => {
-    item[table.selectedField] = status;
-    if (props.tree && item.children && item.children.length > 0) {
-      setSelectedStatus(item.children, status);
-    }
-  });
-};
-const setTickedStatus = (arr, status, cascadeChildren = true) => {
-  arr.forEach((item) => {
-    item[table.tickedField] = status;
-    if (props.tree && cascadeChildren && item.children && item.children.length > 0) {
-      setTickedStatus(item.children, status, cascadeChildren);
-    }
-  });
-};
-/**
- * 设置目标行选中
- * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组。
- * @return 无返回
- */
-const setSelected = (target) => {
-  if (target) {
-    const result = getGridRows(target);
-    if (result && result.length > 0) {
-      setSelectedStatus(result, true);
-    }
-  }
-};
-/**
- * 设置目标行checkbox勾选
- * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组。
- * @return 无返回
- */
-const setTicked = (target) => {
-  if (target) {
-    const result = getGridRows(target);
-    if (result && result.length > 0) {
-      setTickedStatus(result, true);
-    }
-  }
-};
-/**
- * 清空目标行选中
- * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组，不传或者为空则清空全部选中状态
- * @return 无返回
- */
-const clearSelected = (target = undefined) => {
-  if (target || (Array.isArray(target) && target.length > 0)) {
-    const result = getGridRows(target);
-    if (result && result.length > 0) {
-      setSelectedStatus(result, false);
-    }
-  } else {
-    setSelectedStatus(table.rows, false);
-  }
-};
-/**
- * 清空目标checkbox勾选记录
- * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组，不传或者为空则清空全部选中状态
- * @return 无返回
- */
-const clearTicked = (target = undefined) => {
-  if (target || (Array.isArray(target) && target.length > 0)) {
-    const result = getGridRows(target);
-    if (result && result.length > 0) {
-      setTickedStatus(result, false);
-    }
-  } else {
-    setTickedStatus(table.rows, false);
-  }
-};
-
-const expandFun = (arr, treeExpand) => {
-  arr.forEach((item) => {
-    if (props.tree && item.children && item.children.length > 0) {
-      item[rowDataExtraPropertyName.expand] = !treeExpand;
-      expandFun(item.children, treeExpand);
-    }
-  });
-};
-/**
- * 展开树表格行
- * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组，不传或者为空则展开全部
- * @param cascadeChildren 是否级联子，级联模式下所有的子节点也展开
- */
-const expand = (target = undefined, cascadeChildren = false) => {
-  if (target) {
-    const result = getGridRows(target);
-    result.forEach((item: any) => {
-      item[rowDataExtraPropertyName.expand] = true;
-      if (cascadeChildren && item.children && item.children.length > 0) {
-        expandFun(item.children, false);
-      }
-    });
-  } else {
-    expandFun(table.rows, false);
-  }
-};
-
-/**
- * 收起树表格行
- * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组，不传或者为空则收起全部
- * @param cascadeParents 是否级联父，级联模式下往上找，将传入数据的父节点收起
- */
-const collapse = (target = undefined, cascadeParents = false) => {
-  if (target) {
-    const result = getGridRows(target);
-    result.forEach((item: any) => {
-      item[rowDataExtraPropertyName.expand] = false;
-      if (cascadeParents) {
-        const parents = getCascadeParentsData(item, null);
-        if (parents && parents.length > 0) {
-          expandFun(parents, true);
-        }
-      }
-    });
-  } else {
-    expandFun(table.rows, true);
-  }
+const getTableRef = () => {
+  return tableRef.value;
 };
-// =========表格操作相关API=========end
-
-// =========本地数据模式相关API=========start
-/**
- * 设置本地记录
- * @param rows 行数据对象数组
- * @return 无返回
- */
-const setLocalData = (rows: any) => {
-  if (rows && Array.isArray(rows)) {
-    setTimeout(() => {
-      if (props.tree && props.treeRelationship === 'parent') {
-        const treeRows = TreeBuilder.build(rows, props.foreignKey, props.primaryKey);
-        table.rows = treeRows;
-      } else {
-        table.rows = rows;
-      }
-      setRowDataExtraProperty(table.rows);
-      state.pagination.rowsNumber = table.rows.length;
-      refreshStyle();
-    }, 100);
-  }
+const getTopRef = () => {
+  return topRef.value;
 };
-/**
- * 新增本地记录
- * @param data 行数据对象或行数据对象数组
- * @param index 增加的下标，可不传，默认增加到最后
- * @return 无返回
- */
-const addLocalData = (data, index) => {
-  let flag = false;
-  if (data && Array.isArray(data) && data.length > 0) {
-    data.forEach((row) => {
-      if (!index || index >= table.rows.length) {
-        table.rows.push(row);
-      } else {
-        table.rows.splice(index, 0, row);
-      }
-    });
-    flag = true;
-  } else if (data) {
-    if (!index || index >= table.rows.length) {
-      table.rows.push(data);
-    } else {
-      table.rows.splice(index, 0, data);
-    }
-    flag = true;
-  }
-  if (flag) {
-    setRowDataExtraProperty(table.rows);
-    state.pagination.rowsNumber = table.rows.length;
-    refreshStyle();
-  }
+const getHeaderRef = () => {
+  return headerRef.value;
 };
-const replaceRowHandler = (arr, row, columnName) => {
-  for (let i = 0; i < arr.length; i++) {
-    if (!Tools.isEmpty(columnName) && row[columnName] === arr[i][columnName]) {
-      // 根据设定的字段进行匹配
-      arr[i] = { ...arr[i], ...row };
-      break;
-    } else if (Tools.isEmpty(columnName) && !Tools.isEmpty(row[props.primaryKey]) && row[props.primaryKey] === arr[i][props.primaryKey]) {
-      // 未设定根据哪个字段匹配时首先尝试用主键进行匹配。
-      arr[i] = { ...arr[i], ...row };
-      break;
-    } else if (Tools.isEmpty(columnName) && row[rowDataExtraPropertyName.rowKey] === arr[i][rowDataExtraPropertyName.rowKey]) {
-      // 主键匹配失败则尝试用前端唯一键进行匹配
-      arr[i] = { ...arr[i], ...row };
-      break;
-    } else if (props.tree && arr[i].children && arr[i].children.length > 0) {
-      replaceRowHandler(arr[i].children, row, columnName);
-    }
-  }
-};
-/**
- * 修改本地记录
- * @param data 行数据对象或行数据对象数组
- * @param columnName 默认根据数据行主键或者前端行主键进行修改，若传入列名称则根据传入的列名称进行匹配修改。
- * @return 无返回
- */
-const updateLocalData = (data, columnName = '') => {
-  if (data && Array.isArray(data)) {
-    data.forEach((item) => {
-      updateLocalDataError(columnName, item);
-      replaceRowHandler(table.rows, item, columnName);
-    });
-  } else if (data) {
-    updateLocalDataError(columnName, data);
-    replaceRowHandler(table.rows, data, columnName);
-  }
+const getBodyRef = () => {
+  return bodyRef.value;
 };
-const updateLocalDataError = (columnName, data) => {
-  if (Tools.isEmpty(columnName) && Tools.isEmpty(data[props.primaryKey]) && Tools.isEmpty(data[rowKey_])) {
-    throw new Error('Data does not contain `primaryKey` or `rowKey`.');
-  }
+const getEditorRef = () => {
+  return editorRef.value;
 };
-const removeTreeRows = (arr, row) => {
-  arr.forEach((item, index) => {
-    if (row[props.primaryKey] === item[props.primaryKey] || row[rowDataExtraPropertyName.rowKey] === item[rowDataExtraPropertyName.rowKey]) {
-      arr.splice(index, 1);
-    } else if (item.children && item.children.length > 0) {
-      removeTreeRows(item.children, row);
-    }
-  });
+const getCellEditorRef = () => {
+  return cellEditorRef.value;
 };
-/**
- * 删除本地数据 TODO: 待优化
- * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组
- * @return 无返回
- */
-const removeLocalData = (target) => {
-  const result = getGridRows(target);
-  if (result && result.length > 0) {
-    if (props.tree) {
-      result.forEach((item) => {
-        removeTreeRows(table.rows, item);
-      });
-      setRowDataExtraProperty(table.rows);
-    } else {
-      result.forEach((item) => {
-        table.rows.splice(
-          table.rows.findIndex((v) => {
-            if (!Tools.isEmpty(v[props.primaryKey]) && Tools.isEmpty(item[props.primaryKey])) {
-              return v[props.primaryKey] === item[props.primaryKey];
-            } else {
-              return v[rowKey_] === item[rowKey_];
-            }
-          }),
-          1,
-        );
-      });
-      state.pagination.rowsNumber = table.rows.length;
-    }
-    allTickedStatus();
-    refreshStyle();
-  }
+const getViewRef = () => {
+  return viewRef.value;
 };
-// =========本地数据模式相关API=========end
 
-// =========修改表格配置相关API=========start
-/**
- * 设置查询criteria
- * @param criteria criteria对象
- * return 无返回
- */
-const setQueryCriteria = (criteria) => {
-  queryCriteria = criteria;
-};
-const setQueryCriteriaFieldValueHandler = (criteria, fieldName, fieldValue) => {
-  if (criteria.criteria && criteria.criteria.length > 0) {
-    criteria.criteria.forEach((item) => {
-      if (!item.criteria && item.fieldName && item.fieldName === fieldName) {
-        item.value = fieldValue;
-      } else {
-        setQueryCriteriaFieldValueHandler(item.criteria, fieldName, fieldValue);
-      }
-    });
-  } else if (criteria.fieldName && criteria.fieldName === fieldName) {
-    criteria.value = fieldValue;
-  }
-};
-/**
- * 设置查询criteria中的字段值
- * @param fieldName 字段名称
- * @param fieldValue 字段值
- * @return 无返回
- */
-const setQueryCriteriaFieldValue = (fieldName, fieldValue) => {
-  if (Object.keys(queryCriteria).length === 0) {
-    console.error('queryCriteria Not Setting');
-    return;
-  }
-  setQueryCriteriaFieldValueHandler(queryCriteria, fieldName, fieldValue);
+// 将获得子组件ref的方法设置进 table.componentRef 中
+tools.table.componentRef = {
+  getTableRef,
+  getTopRef,
+  getHeaderRef,
+  getBodyRef,
+  getEditorRef,
+  getCellEditorRef,
+  getViewRef,
 };
-// 设置数据baseUrl
-const setDataUrl = (url_) => {
-  url.dataUrl = url_;
-};
-// 设置数据查询url
-const setFetchDataUrl = (url_) => {
-  url.fetchDataUrl = url_;
-};
-// 设置新增url
-const setAddDataUrl = (url_) => {
-  url.addDataUrl = url_;
-};
-// 设置修改url
-const setEditDataUrl = (url_) => {
-  url.editDataUrl = url_;
-};
-// 设置删除url
-const setRemoveDataUrl = (url_) => {
-  url.removeDataUrl = url_;
-};
-// =========修改表格配置相关API=========end
 
-// =========内置按钮API=========start
-const reset = () => {
-  topRef.value?.reset();
-};
-const refresh = () => {
-  nextTick(() => {
-    onRequest({
-      pagination: state.pagination,
-    });
-    table.allTicked = false;
-  });
-};
-const add = () => {
-  topRef.value?.add();
-};
-const edit = (rowData) => {
-  if (!Tools.isEmpty(rowData)) {
-    topRef.value?.edit(rowData);
-  }
-};
-const rowEdit = (rowData) => {
-  setSelected(rowData);
-  topRef.value?.rowEdit();
-};
-const rowsEdit = () => {
-  topRef.value?.rowsEdit();
-};
-const clone = (rowData) => {
-  setSelected(rowData);
-  topRef.value?.clone();
-};
-const view = (rowData) => {
-  setSelected(rowData);
-  viewRef.value?.view();
-};
-const remove = (rowsData) => {
-  setSelected(rowsData);
-  topRef.value?.remove();
-};
-const exportData = () => {
-  topRef.value?.export();
-};
-const addTop = () => {
-  topRef.value?.addTop();
-};
-const addChild = (rowData) => {
-  setSelected(rowData);
-  viewRef.value?.addChild();
-};
-const resetDefaultValues = () => {
-  topRef.value?.resetDefaultValues();
-};
-// =========内置按钮API=========end
-
-// =========其他API=========start
-/**
- * 获得表格对象html对象
- * @return element对象
- */
-const getHtmlElement = () => {
-  return tableRef?.value?.$el;
-};
-/**
- * 刷新表格样式
- * @param time 延迟时间(毫秒)，不传默认500
- * @return 无返回
- */
-const refreshStyle = (time = 500) => {
-  setTimeout(() => {
-    // 延迟处理锁定列及表格宽高的获取
-    if (tableRef.value) {
-      state.refHeightWidth.yLocation = tableRef.value.$el.getBoundingClientRect()?.y;
-      if (tableRef.value.$el.getElementsByClassName('noDataTr').length > 0) {
-        state.refHeightWidth.noDataTrYLocation = tableRef.value.$el.getElementsByClassName('noDataTr')[0]?.getBoundingClientRect().y;
-      }
-      state.refHeightWidth.topHeight = tableRef.value.$el.getElementsByClassName('q-table__top')[0]?.clientHeight;
-      state.refHeightWidth.bottomHeight = tableRef.value.$el.getElementsByClassName('q-table__bottom')[0]?.clientHeight;
-      state.refHeightWidth.middleWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientWidth;
-      state.refHeightWidth.middleScrollWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
-      state.refHeightWidth.columnHeadHeight = tableRef.value.$el.getElementsByTagName('thead')[0]?.clientHeight;
-      state.refHeightWidth.hideHeaderNoDataHeight = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientHeight;
-      // 判断是否有数据，没数据修改 middleHeight
-      if ((table.rows && table.rows.length > 0) || attrs['hide-bottom']) {
-        state.refHeightWidth.middleHeight = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientHeight;
-      } else {
-        let scrollHeight = 0;
-        if (state.refHeightWidth.middleScrollWidth - state.refHeightWidth.middleWidth > 0) {
-          scrollHeight = 15;
-        }
-        state.refHeightWidth.middleHeight = state.refHeightWidth.columnHeadHeight + scrollHeight;
-      }
-
-      const tableDom = tableRef.value.$el.getElementsByTagName('table')[0];
-      if (table.stickyNum > 0) {
-        if (headerRef.value?.getColumnTitleState()?.columnTitleRowNum > 1) {
-          const theadDom = tableDom.getElementsByTagName('thead')[0];
-          const theadTrDom = theadDom.getElementsByTagName('tr');
-          tableDom.style.setProperty('--columnWidth' + '-' + 0 + '-' + 0, 0 + 'px');
-          for (let i = 0; i < theadDom.getElementsByTagName('tr').length; i++) {
-            const theadThDom = theadTrDom[i].getElementsByTagName('th');
-            for (let k = 0; k < theadThDom.length; k++) {
-              tableDom.style.setProperty('--columnWidth' + '-' + (i + 1) + '-' + (k + 1), theadThDom[k].offsetWidth + 'px');
-            }
-          }
-        }
-
-        let column1Width = tableDom.getElementsByTagName('td')[0]?.offsetWidth;
-        let column2Width = tableDom.getElementsByTagName('td')[1]?.offsetWidth;
-        let column3Width = tableDom.getElementsByTagName('td')[2]?.offsetWidth;
-        let column4Width = tableDom.getElementsByTagName('td')[3]?.offsetWidth;
-        let column5Width = tableDom.getElementsByTagName('td')[4]?.offsetWidth;
-        let column6Width = tableDom.getElementsByTagName('td')[5]?.offsetWidth;
-        let column7Width = tableDom.getElementsByTagName('td')[6]?.offsetWidth;
-        let column8Width = tableDom.getElementsByTagName('td')[7]?.offsetWidth;
-        let column9Width = tableDom.getElementsByTagName('td')[8]?.offsetWidth;
-
-        tableDom.style.setProperty('--column1Width', column1Width + 'px');
-        tableDom.style.setProperty('--column2Width', column1Width + column2Width + 'px');
-        tableDom.style.setProperty('--column3Width', column1Width + column2Width + column3Width + 'px');
-        tableDom.style.setProperty('--column4Width', column1Width + column2Width + column3Width + column4Width + 'px');
-        tableDom.style.setProperty('--column5Width', column1Width + column2Width + column3Width + column4Width + column5Width + 'px');
-        tableDom.style.setProperty('--column6Width', column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + 'px');
-        tableDom.style.setProperty(
-          '--column7Width',
-          column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + 'px',
-        );
-        tableDom.style.setProperty(
-          '--column8Width',
-          column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + column8Width + 'px',
-        );
-        tableDom.style.setProperty(
-          '--column9Width',
-          column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + column8Width + column9Width + 'px',
-        );
-      }
-      let titleTotalHeight = tableDom.getElementsByTagName('thead')[0]?.offsetHeight;
-      // 无数据时列头会增加一行，多表头的top距离计算会出错，需减掉多出来的提示行。
-      if (table.rows.length === 0) {
-        const noDataTrHeight = tableRef.value.$el.getElementsByClassName('noDataTr')[0]?.offsetHeight;
-        if (titleTotalHeight && titleTotalHeight > 0) {
-          titleTotalHeight = titleTotalHeight - noDataTrHeight;
-        } else {
-          titleTotalHeight = noDataTrHeight;
-        }
-      }
-      state.refHeightWidth.titleTotalHeight = titleTotalHeight;
-    }
-  }, time);
-
-  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableHeadBgColor', tableHeadBgColor);
-  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--stickyBgColor', stickyBgColor);
-  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableBorderColor', tableBorderColor);
-  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableColumnTitleHeight', (denseHeaderComputed.value ? 28 : 48) + 'px');
-  let headerPadding = '8px';
-  if (denseHeaderComputed.value) {
-    headerPadding = '4px';
-  }
-  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableHeaderPadding', headerPadding);
-  let bodyPadding = '8px';
-  if (denseBodyComputed.value) {
-    bodyPadding = '4px';
-  }
-  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableBodyPadding', bodyPadding);
-  tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableBodyHeight', (denseBodyComputed.value ? 24 : 48) + 'px');
-  nextTick(() => {
-    if (denseBottomComputed.value && (!Tools.hasOwnProperty(attrs, 'hide-bottom') || attrs['hide-bottom'] === false)) {
-      if (tableRef.value.$el.getElementsByClassName('q-table__bottom').length > 0) {
-        tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 33 + 'px');
-        tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 24 + 'px');
-      }
-    } else if (
-      (!Tools.hasOwnProperty(attrs, 'hide-bottom') || attrs['hide-bottom'] === false) &&
-      tableRef.value.$el.getElementsByClassName('q-table__bottom').length > 0
-    ) {
-      tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 50 + 'px');
-      tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 40 + 'px');
-    }
-  });
-  if (props.title || props.toolbarActions.length > 0 || props.configButton) {
-    tableRef.value.$el.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '8px');
-  } else {
-    tableRef.value.$el.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '0px');
-  }
-};
-// =========其他API=========end
-
-defineExpose({
-  // =========获取数据相关API=========
-  getRows,
-  getSelectedRow,
-  getSelectedRows,
-  getTickedRow,
-  getTickedRows,
-  getCascadeChildren,
-  getCascadeParents,
-  getSelectedCell,
-  // =========获取内置组件ref对象相关API=========
-  getQueryForm,
-  getEditorDialog,
-  getCellEditorDialog,
-  getEditorForm,
-  getCellEditorForm,
-  getViewerDrawer,
-  getViewerPanel,
-
-  // =========表格操作相关API=========
-  setSelected,
-  setTicked,
-  clearSelected,
-  clearTicked,
-  expand,
-  collapse,
-
-  // =========本地数据模式相关API=========
-  setLocalData,
-  addLocalData,
-  updateLocalData,
-  removeLocalData,
-
-  // =========修改表格配置相关API=========
-  setQueryCriteria,
-  setQueryCriteriaFieldValue,
-  setDataUrl,
-  setFetchDataUrl,
-  setAddDataUrl,
-  setEditDataUrl,
-  setRemoveDataUrl,
-
-  // =========内置按钮API=========
-  reset,
-  refresh,
-  add,
-  edit,
-  rowEdit,
-  rowsEdit,
-  clone,
-  remove,
-  view,
-  export: exportData,
-  addTop,
-  addChild,
-  resetDefaultValues,
-
-  // =========其他API=========
-  getHtmlElement,
-  refreshStyle,
-});
+// 对外暴露API
+defineExpose(ExposeApiManager.createExpose(tools));
 
+// 获得自身实例
 const instance = getCurrentInstance();
+// 将对外暴露API添加至自身实例中
 VueTools.expose2Instance(instance);
+
+// tools 设置表格实例
+tools.setInstance(instance);
+
+// 将 tools 通过 provide 函数提供给所有的子组件使用。
+provide('tools', tools);
 </script>
 
 <style lang="css">
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/css/separator.css b/io.sc.platform.core.frontend/src/platform/components/grid/css/separator.css
index 9033b69e..c56bcd7f 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/css/separator.css
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/css/separator.css
@@ -83,4 +83,11 @@
 */
 .w-grid .q-table--cell-separator tbody tr:last-child td {
   border-bottom-width: 1px;
+}
+/*
+* cell
+* 数据最后一行底部边框 (当元素具有.w-grid.q-table--cell-separator时表示表格全屏)
+*/
+.w-grid.q-table--cell-separator tbody tr:last-child td {
+  border-bottom-width: 1px;
 }
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/Editor.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/Editor.vue
new file mode 100644
index 00000000..49bcd49e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/Editor.vue
@@ -0,0 +1,216 @@
+<template>
+  <w-dialog
+    ref="dialogRef"
+    v-bind="tools.props.editor.dialog"
+    :title="dialog.dialogTitle"
+    :buttons="dialogButtonsComputed"
+    @hide="
+      () => {
+        saveLoading = false;
+      }
+    "
+  >
+    <w-form ref="dialogFormRef" v-bind="tools.props.editor.form" class="pt-1.5 px-1.5"></w-form>
+  </w-dialog>
+</template>
+<script setup lang="ts">
+import { $t, Tools } from '@/platform';
+import { computed, inject, reactive, ref } from 'vue';
+import { Constant, GridTools } from '../ts/index';
+
+const tools = <GridTools>inject('tools');
+const dialogRef = ref();
+const dialogFormRef = ref();
+const props = defineProps({});
+
+const dialogButtonsComputed = computed(() => {
+  if (tools.props.editor?.dialog?.buttons) {
+    return [...tools.props.editor.dialog.buttons, ...dialog.dialogButtons];
+  }
+  return dialog.dialogButtons;
+});
+
+const save = async () => {
+  saveLoading.value = true;
+  const formStatus = dialogFormRef.value.getStatus();
+  const validate = await dialogFormRef.value.validate();
+  if (validate) {
+    let dialogFormData = dialogFormRef.value.getData();
+    const selected = tools.apiFM.getData.getSelectedRow();
+    if (formStatus === Constant.FORM_STATUS.EDIT && selected && selected[tools.props.primaryKey] && Tools.isEmpty(dialogFormData[tools.props.primaryKey])) {
+      dialogFormData[tools.props.primaryKey] = selected[tools.props.primaryKey];
+    }
+    // 触发事件
+    const eventResult = tools.em.beforeEditorDataSubmit(dialogFormData);
+    dialogFormData = eventResult.data;
+    if (eventResult.submit) {
+      setForeignKey(dialogFormData, formStatus, selected);
+      if (formStatus === Constant.FORM_STATUS.EDIT) {
+        // 将行数据默认添加到传递给后端的数据中
+        dialogFormData = { ...selected, ...dialogFormData };
+      }
+      if (tools.props.localMode) {
+        localModeSave(dialogFormData, formStatus, eventResult.closeDialog);
+      } else {
+        serverSave(dialogFormData, formStatus, selected, eventResult.closeDialog);
+      }
+    } else {
+      saveLoading.value = false;
+      if (eventResult.closeDialog) {
+        dialogRef.value.hide();
+      }
+    }
+  } else {
+    saveLoading.value = false;
+  }
+};
+
+const saveLoading = ref(false);
+const dialog = reactive({
+  dialogTitle: $t('action.addNew'),
+  dialogButtons: [
+    {
+      icon: 'beenhere',
+      labelI18nKey: tools.props.localMode ? 'confirm' : 'action.submit',
+      label: $t(tools.props.localMode ? 'confirm' : 'action.submit'),
+      loading: saveLoading.value,
+      click: () => {
+        save();
+      },
+    },
+  ],
+});
+
+// 新增树表格中的数据
+const addTreeRow = (row) => {
+  if (Tools.isEmpty(row[tools.props.foreignKey])) {
+    tools.table.rows.push(row);
+  } else {
+    const parent = tools.dataFM.getRow(tools.table.rows, row[tools.props.foreignKey], true);
+    if (parent) {
+      if (parent['children'] && Array.isArray(parent['children'])) {
+        parent['children'].push(row);
+      } else {
+        parent['children'] = [row];
+      }
+    }
+  }
+};
+
+const addData = (dialogFormData) => {
+  if (tools.props.tree) {
+    addTreeRow(dialogFormData);
+    tools.dataFM.setExtraProperty(tools.table.rows);
+  } else {
+    tools.apiFM.localMode.addLocalData(dialogFormData, undefined);
+  }
+};
+const updateData = (dialogFormData) => {
+  const selected = tools.apiFM.getData.getSelectedRow();
+  if (!selected) {
+    return;
+  }
+  if (Tools.isEmpty(dialogFormData[tools.props.primaryKey])) {
+    dialogFormData[tools.props.primaryKey] = selected[tools.props.primaryKey];
+  }
+  dialogFormData[tools.props.selectedField] = true;
+  if (selected['children']) {
+    dialogFormData['children'] = selected['children'];
+  }
+  tools.apiFM.localMode.updateLocalData(dialogFormData);
+};
+
+const localModeSave = (dialogFormData: any, formStatus: string, closeDialog: boolean) => {
+  if (isAdd(formStatus)) {
+    addData(dialogFormData);
+  } else {
+    updateData(dialogFormData);
+  }
+  saveLoading.value = false;
+  if (closeDialog) {
+    dialogRef.value.hide();
+  }
+};
+
+const serverSave = (dialogFormData: any, formStatus: string, selected: any, closeDialog: boolean) => {
+  const method = getMethod(formStatus);
+  const url = getUrl(formStatus, selected);
+  const callback = (resp: any) => {
+    saveLoading.value = false;
+    if (closeDialog) {
+      dialogRef.value.hide();
+    }
+    if (tools.props.refreshData || !tools.props.tree) {
+      tools.apiFM.operator.refreshGrid();
+    } else if (resp.data && isAdd(formStatus)) {
+      addData(resp.data);
+    } else if (resp.data) {
+      updateData(resp.data);
+    }
+  };
+  const errorCallback = () => {
+    saveLoading.value = false;
+  };
+  tools.reqApiFM.save(method, dialogFormData, url, dialogFormRef.value, callback, errorCallback);
+};
+
+const setForeignKey = (dialogFormData: any, formStatus: string, selected: any) => {
+  if (formStatus === Constant.FORM_STATUS.ADD) {
+    dialogFormData[tools.props.foreignKey] = null;
+  } else if (formStatus === Constant.FORM_STATUS.ADD_CHILD) {
+    dialogFormData[tools.props.foreignKey] = selected[tools.props.primaryKey];
+  } else if ((formStatus === Constant.FORM_STATUS.EDIT || formStatus === Constant.FORM_STATUS.CLONE) && selected[tools.props.foreignKey]) {
+    dialogFormData[tools.props.foreignKey] = selected[tools.props.foreignKey];
+  }
+};
+
+const isAdd = (formStatus: string) => {
+  return (
+    formStatus === Constant.FORM_STATUS.ADD ||
+    formStatus === Constant.FORM_STATUS.CLONE ||
+    formStatus === Constant.FORM_STATUS.ADD_TOP ||
+    formStatus === Constant.FORM_STATUS.ADD_CHILD
+  );
+};
+
+const getMethod = (formStatus: string) => {
+  if (isAdd(formStatus)) {
+    return 'POST';
+  } else {
+    return 'PUT';
+  }
+};
+
+const getUrl = (formStatus: string, selected: any) => {
+  if (isAdd(formStatus)) {
+    if (!Tools.isEmpty(tools.table.url.addDataUrl)) {
+      return tools.table.url.addDataUrl;
+    } else {
+      return tools.table.url.dataUrl;
+    }
+  } else {
+    if (!Tools.isEmpty(tools.table.url.editDataUrl)) {
+      return tools.table.url.editDataUrl + '/' + selected[tools.props.primaryKey];
+    } else {
+      return tools.table.url.dataUrl + '/' + selected[tools.props.primaryKey];
+    }
+  }
+};
+
+const resetButtonLabel = () => {
+  dialog.dialogButtons[0].label = $t(dialog.dialogButtons[0].labelI18nKey);
+};
+const getDialog = () => {
+  return dialogRef.value;
+};
+const getForm = () => {
+  return dialogFormRef.value;
+};
+
+defineExpose({
+  resetButtonLabel,
+  getDialog,
+  getForm,
+});
+</script>
+<style lang="css"></style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/ViewPanel.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/ViewPanel.vue
new file mode 100644
index 00000000..dbbb57d0
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/ViewPanel.vue
@@ -0,0 +1,71 @@
+<template>
+  <w-drawer ref="drawerRef" :title="$t('action.view')" v-bind="tools.props.viewer?.drawer">
+    <div class="p-2.5">
+      <w-info-panel ref="infoRef" v-bind="tools.props.viewer?.panel" :info="infoArray"></w-info-panel>
+    </div>
+  </w-drawer>
+</template>
+<script setup lang="ts">
+import { $t, NotifyManager, t } from '@/platform';
+import { inject, ref } from 'vue';
+import { GridTools } from '../ts/index';
+
+const tools = <GridTools>inject('tools');
+const drawerRef = ref();
+const infoRef = ref();
+const gridColumnObjects = GridTools.arrayToObject(tools.table.originalColumns, 'name');
+
+const props = defineProps({});
+
+const infoArray = ref(<any>[]);
+
+const view = () => {
+  const selected = tools.apiFM.getData.getSelectedRow();
+  if (!selected) {
+    NotifyManager.warn(t('action.view.tip'));
+  } else {
+    infoArray.value = [];
+    if (tools.props.viewer.panel.fields && tools.props.viewer.panel.fields.length > 0) {
+      for (let item of tools.props.viewer.panel.fields) {
+        const value = formatValue(item, selected);
+        infoArray.value.push({ label: item.label, value: value, originalValue: selected[item.name] });
+      }
+    } else {
+      for (let key in gridColumnObjects) {
+        const item = gridColumnObjects[key];
+        const value = formatValue(item, selected);
+        infoArray.value.push({ label: item.label, value: value, originalValue: selected[key] });
+      }
+    }
+    drawerRef.value.show();
+  }
+};
+
+const formatValue = (item, selected) => {
+  let value = selected[item.name];
+  try {
+    if (item.format) {
+      value = item.format(value, selected);
+    } else if (gridColumnObjects[item.name] && gridColumnObjects[item.name].format) {
+      value = gridColumnObjects[item.name].format(value, selected);
+    }
+  } catch (error) {
+    console.error('[w-grid]column `' + item.name + '` format error：', error);
+  }
+  return value;
+};
+
+const getViewerDrawer = () => {
+  return drawerRef.value;
+};
+const getInfoPanel = () => {
+  return infoRef.value;
+};
+
+defineExpose({
+  getViewerDrawer,
+  getInfoPanel,
+  view,
+});
+</script>
+<style lang="css"></style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/advanced-query/AdvancedQuery.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/advanced-query/AdvancedQuery.vue
new file mode 100644
index 00000000..6ddf14ad
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/advanced-query/AdvancedQuery.vue
@@ -0,0 +1,58 @@
+<template>
+  <w-query-builder ref="queryBuilderRef" v-model="tools.table.advancedQueryModelValue" :options="options"></w-query-builder>
+</template>
+<script setup lang="ts">
+import { inject, onBeforeMount, ref } from 'vue';
+import { GridTools } from '../../ts/index';
+
+const queryBuilderRef = ref();
+const tools = <GridTools>inject('tools');
+const options: any = [];
+
+const buildOptions = () => {
+  options.splice(0, options.length - 1);
+  tools.props.queryFormFields.forEach((item) => {
+    const field = {
+      label: item['label'],
+      value: item['name'],
+      useComponent: {
+        ...item,
+        label: undefined, // 覆盖label
+        name: undefined, // 覆盖name
+        type: typeConversion(item['type']), // 覆盖类型
+      },
+    };
+    options.push(field);
+  });
+};
+
+/**
+ * 对于特定的类型，使用 w-query-build 组件时会存在矛盾点.
+ * 比如普通查询配置使用日期范围，但是在w-query-build中本身就提供范围选项，所以需要将其转换成普通日期类型
+ * @param type
+ */
+const typeConversion = (type: string) => {
+  let result = '';
+  switch (type) {
+    case 'w-date-range':
+      result = 'w-date';
+      break;
+    default:
+      result = type;
+      break;
+  }
+  return result;
+};
+
+onBeforeMount(() => {
+  buildOptions();
+});
+
+const reset = () => {
+  queryBuilderRef.value.clearValue();
+};
+
+defineExpose({
+  reset: reset,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/append/AppendContent.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/append/AppendContent.vue
new file mode 100644
index 00000000..cb445290
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/append/AppendContent.vue
@@ -0,0 +1,21 @@
+<template>
+  <template v-if="typeof props.value === 'object' && props.value.componentType">
+    <component :is="props.value.componentType" v-bind="props.value.attrs"></component>
+  </template>
+  <template v-else>
+    <span v-dompurify-html="!Tools.isEmpty(props.value) ? props.value : ''"></span>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { Tools } from '@/platform';
+
+const props = defineProps({
+  value: {
+    type: [Object, String, Number],
+    default: () => {
+      return '';
+    },
+  },
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/append/AppendRow.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/append/AppendRow.vue
new file mode 100644
index 00000000..755f3ddc
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/append/AppendRow.vue
@@ -0,0 +1,39 @@
+<template>
+  <template v-if="showAppendRowsComputed">
+    <q-tr v-for="(appendRow, rowIndex) in tools.props.appendRows" :key="rowIndex" :no-hover="true" :class="''">
+      <q-td v-for="(col, colIndex) in appendRow" :key="colIndex" :rowspan="col['rowSpan'] ? col['rowSpan'] : 1" :colspan="col['colSpan'] ? col['colSpan'] : 1">
+        <template v-if="typeof col['value'] === 'function'">
+          <AppendContent :value="col.value({ grid: tools.instance, rows: tools.apiFM.getData.getRows() })"></AppendContent>
+        </template>
+        <template v-else>
+          <span v-dompurify-html="!Tools.isEmpty(col['value']) ? col['value'] : ''"></span>
+        </template>
+      </q-td>
+    </q-tr>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { inject, computed } from 'vue';
+import { Tools } from '@/platform';
+import { GridTools } from '../../ts/index';
+import AppendContent from './AppendContent.vue';
+
+const tools = <GridTools>inject('tools');
+const props = defineProps({
+  scope: {
+    // 顶部插槽属性
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+const showAppendRowsComputed = computed(() => {
+  if (Array.isArray(tools.props.appendRows) && tools.props.appendRows.length > 0) {
+    return tools.dataFM.isLastRow(props.scope.row);
+  }
+  return false;
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/AloneGroup.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/AloneGroup.vue
new file mode 100644
index 00000000..c061f6b5
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/AloneGroup.vue
@@ -0,0 +1,54 @@
+<template>
+  <q-expansion-item label="分组">
+    <q-card>
+      <q-card-section>
+        <template v-for="col in tools.cm.displayColumns.value" :key="col.name">
+          <q-item v-if="col !== Constant.FIELD_NAMES.SORT_NO" v-ripple tag="label" dense>
+            <q-item-section side>
+              <q-checkbox v-model="dynamicModel[col]" dense @update:model-value="groupByFieldChange(col)" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ displayColumnLabel[col] }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-card-section>
+    </q-card>
+  </q-expansion-item>
+</template>
+<script setup lang="ts">
+import { inject, ref } from 'vue';
+import { GridTools, Constant } from '../../ts/index';
+
+const tools = <GridTools>inject('tools');
+const dynamicModel = ref({});
+const displayColumnLabel = ref({});
+
+const getColumn = (name) => {
+  return tools.table.columns.find((item) => item['name'] === name);
+};
+
+tools.cm.displayColumns.value.forEach((item) => {
+  const column = getColumn(item);
+  if (column) {
+    displayColumnLabel.value[item] = column.label;
+  }
+  dynamicModel.value[item] = item === tools.table.configStore.aloneGroupByField || false;
+});
+
+const groupByFieldChange = (col: string) => {
+  const value = dynamicModel.value[col];
+  if (value) {
+    // 清空其他勾选状态
+    Object.keys(dynamicModel.value).forEach((item) => {
+      if (item !== col) {
+        dynamicModel.value[item] = false;
+      }
+    });
+    tools.table.configStore.aloneGroupByField = col;
+  } else {
+    tools.table.configStore.aloneGroupByField = undefined;
+  }
+  tools.dataFM.setExtraProperty(tools.table.rows);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/CheckboxSelection.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/CheckboxSelection.vue
new file mode 100644
index 00000000..ab9ef3e4
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/CheckboxSelection.vue
@@ -0,0 +1,36 @@
+<template>
+  <q-item :clickable="true" @click="click">
+    <q-item-section>
+      <q-item-label>复选框</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-btn-group outline flat dense unelevated spread>
+        <q-btn
+          :color="tools.table.configStore.useCheckboxSelection ? 'primary' : ''"
+          :outline="tools.table.configStore.useCheckboxSelection ? false : true"
+          dense
+          label="显示"
+          unelevated
+        />
+        <q-btn
+          :color="tools.table.configStore.useCheckboxSelection ? '' : 'primary'"
+          :outline="tools.table.configStore.useCheckboxSelection ? true : false"
+          dense
+          label="隐藏"
+          unelevated
+        />
+      </q-btn-group>
+    </q-item-section>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { inject } from 'vue';
+import { GridTools } from '../../ts/index';
+
+const tools = <GridTools>inject('tools');
+
+const click = () => {
+  tools.table.configStore.useCheckboxSelection = !tools.table.configStore.useCheckboxSelection;
+  tools.opFM.resetStyleVariableValue(100);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/ConfigPanel.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/ConfigPanel.vue
new file mode 100644
index 00000000..d84bd484
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/ConfigPanel.vue
@@ -0,0 +1,60 @@
+<template>
+  <q-list padding style="min-width: 250px">
+    <!-- 全屏 -->
+    <Fullscreen :scope="props.scope"></Fullscreen>
+    <q-separator />
+
+    <!-- 复选框 -->
+    <CheckboxSelection></CheckboxSelection>
+    <q-separator />
+
+    <!-- 序号 -->
+    <template v-if="!tools.props.tree">
+      <SortNo></SortNo>
+      <q-separator />
+    </template>
+
+    <!-- 分割线 -->
+    <Separator></Separator>
+    <q-separator />
+
+    <!-- 紧凑模式 -->
+    <Dense></Dense>
+    <q-separator />
+
+    <!-- 独立分组 -->
+    <template v-if="!tools.props.tree && tools.props.groupMode === Constant.GROUP_MODE.ALONE">
+      <AloneGorup></AloneGorup>
+      <q-separator />
+    </template>
+
+    <!-- 固定列 -->
+    <StickyColumn></StickyColumn>
+    <q-separator />
+
+    <!-- 显示列 -->
+    <DisplayColumn></DisplayColumn>
+  </q-list>
+</template>
+<script setup lang="ts">
+import { inject } from 'vue';
+import { Constant, GridTools } from '../../ts/index';
+import CheckboxSelection from './CheckboxSelection.vue';
+import Dense from './Dense.vue';
+import DisplayColumn from './DisplayColumn.vue';
+import Fullscreen from './Fullscreen.vue';
+import Separator from './Separator.vue';
+import SortNo from './SortNo.vue';
+import StickyColumn from './StickyColumn.vue';
+import AloneGorup from './AloneGroup.vue';
+
+const tools = <GridTools>inject('tools');
+const props = defineProps({
+  scope: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Dense.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Dense.vue
new file mode 100644
index 00000000..fd6a6b53
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Dense.vue
@@ -0,0 +1,57 @@
+<template>
+  <q-expansion-item label="紧凑模式">
+    <q-card>
+      <q-card-section>
+        <q-item v-ripple tag="label" dense>
+          <q-item-section side>
+            <q-checkbox v-model="tools.table.configStore.dense" dense @update:model-value="denseChange" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>紧凑</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item v-ripple tag="label" dense>
+          <q-item-section side>
+            <q-checkbox v-model="tools.table.configStore.denseToolbar" dense @update:model-value="denseChange" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>按钮栏紧凑</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item v-ripple tag="label" dense>
+          <q-item-section side>
+            <q-checkbox v-model="tools.table.configStore.denseHeader" dense @update:model-value="denseChange" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>列头紧凑</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item v-ripple tag="label" dense>
+          <q-item-section side>
+            <q-checkbox v-model="tools.table.configStore.denseBody" dense @update:model-value="denseChange" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>内容紧凑</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item v-ripple tag="label" dense>
+          <q-item-section side>
+            <q-checkbox v-model="tools.table.configStore.denseBottom" dense @update:model-value="denseChange" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>分页栏紧凑</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-card-section>
+    </q-card>
+  </q-expansion-item>
+</template>
+<script setup lang="ts">
+import { inject } from 'vue';
+import { GridTools } from '../../ts/index';
+
+const tools = <GridTools>inject('tools');
+const denseChange = () => {
+  tools.opFM.resetStyleVariableValue(0);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/DisplayColumn.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/DisplayColumn.vue
new file mode 100644
index 00000000..2e47584e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/DisplayColumn.vue
@@ -0,0 +1,47 @@
+<template>
+  <q-expansion-item label="显示列">
+    <q-card>
+      <q-card-section>
+        <template v-for="col in tools.table.columns" :key="col.name">
+          <q-item v-if="showColumn(col.name)" v-ripple tag="label" dense>
+            <q-item-section side>
+              <q-checkbox
+                v-model="col.showIf"
+                dense
+                @update:model-value="
+                  () => {
+                    tools.opFM.resetStyleVariableValue(100);
+                  }
+                "
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ col.label || col.name }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-card-section>
+    </q-card>
+  </q-expansion-item>
+</template>
+<script setup lang="ts">
+import { inject } from 'vue';
+import { GridTools } from '../../ts/index';
+
+const tools = <GridTools>inject('tools');
+const showColumn = (name) => {
+  // if (props.moreColumnTitleArray.length > 0) {
+  //   if (
+  //     props.moreColumnTitleArray[0].findIndex((item) => {
+  //       return item.name === name;
+  //     }) > -1
+  //   ) {
+  //     return true;
+  //   } else {
+  //     return false;
+  //   }
+  // } else {
+  // }
+  return true;
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Fullscreen.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Fullscreen.vue
new file mode 100644
index 00000000..05e98d5e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Fullscreen.vue
@@ -0,0 +1,35 @@
+<template>
+  <q-item
+    :clickable="true"
+    @click="
+      () => {
+        scope.toggleFullscreen();
+        tools.table.configStore.showConfigPanel = false;
+      }
+    "
+  >
+    <q-item-section>
+      <q-item-label>全屏</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-btn-group outline flat dense unelevated spread>
+        <q-btn :color="!scope.inFullscreen ? 'primary' : ''" :outline="scope.inFullscreen ? true : false" dense label="正常" unelevated />
+        <q-btn :color="scope.inFullscreen ? 'primary' : ''" :outline="!scope.inFullscreen ? true : false" dense label="全屏" unelevated />
+      </q-btn-group>
+    </q-item-section>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { inject } from 'vue';
+import { GridTools } from '../../ts/index';
+
+const tools = <GridTools>inject('tools');
+const props = defineProps({
+  scope: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Separator.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Separator.vue
new file mode 100644
index 00000000..3601e355
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/Separator.vue
@@ -0,0 +1,96 @@
+<template>
+  <q-expansion-item label="分割线">
+    <q-card>
+      <q-card-section>
+        <q-item v-ripple tag="label" dense>
+          <q-item-section side>
+            <q-checkbox v-model="separatorHorizontal" dense @update:model-value="separatorChange('horizontal', separatorHorizontal)" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>水平</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item v-ripple tag="label" dense>
+          <q-item-section side>
+            <q-checkbox v-model="separatorVertical" dense @update:model-value="separatorChange('vertical', separatorVertical)" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>垂直</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item v-ripple tag="label" dense>
+          <q-item-section side>
+            <q-checkbox v-model="separatorCell" dense @update:model-value="separatorChange('cell', separatorCell)" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>单元格</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item v-ripple tag="label" dense>
+          <q-item-section side>
+            <q-checkbox v-model="separatorNone" dense @update:model-value="separatorChange('none', separatorNone)" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>无</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-card-section>
+    </q-card>
+  </q-expansion-item>
+</template>
+<script setup lang="ts">
+import { inject, ref, watch } from 'vue';
+import { GridTools } from '../../ts/index';
+
+const tools = <GridTools>inject('tools');
+
+const separatorHorizontal = ref(false);
+const separatorVertical = ref(false);
+const separatorCell = ref(false);
+const separatorNone = ref(false);
+
+const setSeparatorValue = (value) => {
+  if (value === 'horizontal') {
+    separatorHorizontal.value = true;
+    separatorVertical.value = false;
+    separatorCell.value = false;
+    separatorNone.value = false;
+  } else if (value === 'vertical') {
+    separatorHorizontal.value = false;
+    separatorVertical.value = true;
+    separatorCell.value = false;
+    separatorNone.value = false;
+  } else if (value === 'cell') {
+    separatorHorizontal.value = false;
+    separatorVertical.value = false;
+    separatorCell.value = true;
+    separatorNone.value = false;
+  } else if (value === 'none') {
+    separatorHorizontal.value = false;
+    separatorVertical.value = false;
+    separatorCell.value = false;
+    separatorNone.value = true;
+  }
+};
+
+if (tools.table.configStore.separator) {
+  setSeparatorValue(tools.table.configStore.separator);
+}
+
+const separatorChange = (separator, value) => {
+  if (!value) {
+    setSeparatorValue(tools.table.configStore.separator);
+  } else {
+    tools.table.configStore.separator = separator;
+  }
+};
+
+watch(
+  () => tools.table.configStore.separator,
+  (newVal, oldVal) => {
+    if (newVal) {
+      setSeparatorValue(newVal);
+    }
+  },
+);
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/SortNo.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/SortNo.vue
new file mode 100644
index 00000000..150ce5d8
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/SortNo.vue
@@ -0,0 +1,36 @@
+<template>
+  <q-item :clickable="true" @click="click">
+    <q-item-section>
+      <q-item-label>序号</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-btn-group outline flat dense unelevated spread>
+        <q-btn
+          :color="tools.table.configStore.showSortNo ? 'primary' : ''"
+          :outline="tools.table.configStore.showSortNo ? false : true"
+          dense
+          label="显示"
+          unelevated
+        />
+        <q-btn
+          :color="tools.table.configStore.showSortNo ? '' : 'primary'"
+          :outline="tools.table.configStore.showSortNo ? true : false"
+          dense
+          label="隐藏"
+          unelevated
+        />
+      </q-btn-group>
+    </q-item-section>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { inject } from 'vue';
+import { GridTools } from '../../ts/index';
+
+const tools = <GridTools>inject('tools');
+const click = () => {
+  tools.table.columns[0].showIf = !tools.table.columns[0].showIf;
+  tools.table.configStore.showSortNo = !tools.table.configStore.showSortNo;
+  tools.opFM.resetStyleVariableValue(100);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/StickyColumn.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/StickyColumn.vue
new file mode 100644
index 00000000..3fde5186
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/config/StickyColumn.vue
@@ -0,0 +1,44 @@
+<template>
+  <q-item :clickable="false">
+    <q-item-section>
+      <q-item-label class="nowrap text-nowrap">固定列</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-select
+        v-model="tools.table.configStore.stickyNum"
+        emit-value
+        map-options
+        :hide-bottom-space="true"
+        :hide-hint="true"
+        :outlined="true"
+        :dense="true"
+        :options="stickyOptions"
+        @update:model-value="
+          () => {
+            tools.opFM.resetStyleVariableValue(500);
+          }
+        "
+      >
+      </q-select>
+    </q-item-section>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { inject } from 'vue';
+import { GridTools } from '../../ts/index';
+
+const tools = <GridTools>inject('tools');
+const stickyOptions = [
+  { label: '不固定', value: 0 },
+  { label: '固定1列', value: 1 },
+  { label: '固定2列', value: 2 },
+  { label: '固定3列', value: 3 },
+  { label: '固定4列', value: 4 },
+  { label: '固定5列', value: 5 },
+  { label: '固定6列', value: 6 },
+  { label: '固定7列', value: 7 },
+  { label: '固定8列', value: 8 },
+  { label: '固定9列', value: 9 },
+  { label: '固定10列', value: 10 },
+];
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/group/GroupTr.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/group/GroupTr.vue
new file mode 100644
index 00000000..55f1379a
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/group/GroupTr.vue
@@ -0,0 +1,54 @@
+<template>
+  <template v-if="props.scope.pageIndex === 0 && tools.table.configStore.aloneGroupRecords.length > 0">
+    <template v-for="(record, index) in tools.table.configStore.aloneGroupRecords" :key="index">
+      <q-tr ref="trRef" @click.stop="changeExpand(record)">
+        <q-td :colspan="tools.cm.displayColumnNum.value">
+          <q-btn
+            :size="tools.table.configStore.dense || tools.table.configStore.denseBody ? 'xs' : 'sm'"
+            color="primary"
+            round
+            dense
+            :icon="record['expand'] ? 'remove' : 'add'"
+            @click.stop="changeExpand(record)"
+          />
+          <span class="ml-3 font-medium">{{ record['groupName'] }}</span>
+        </q-td>
+      </q-tr>
+      <template v-if="record['expand']">
+        <Tr v-for="(groupRow, groupRowIndex) in record['rows']" :key="groupRowIndex" :scope="buildScope(groupRow)"></Tr>
+      </template>
+    </template>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import Tr from '../../Tr.vue';
+import { GridTools, Constant } from '../../ts/index';
+
+const tools = <GridTools>inject('tools');
+const props = defineProps({
+  scope: {
+    // 插槽属性
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+const changeExpand = (record: any) => {
+  record['expand'] = !record['expand'];
+};
+
+const buildScope = (groupRow: any) => {
+  const result = GridTools.buildChildrenScope(
+    props.scope,
+    groupRow,
+    groupRow[Constant.FIELD_NAMES.ROW_INDEX],
+    tools.props.selectedField,
+    tools.props.tickedField,
+  );
+  return result;
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/CellEditor.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/CellEditor.vue
new file mode 100644
index 00000000..8243d13d
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/CellEditor.vue
@@ -0,0 +1,97 @@
+<template>
+  <w-dialog ref="dialogRef" :title="dialog.title" v-bind="tools.props.editor?.cellEditor" :buttons="dialog.buttons">
+    <w-form ref="dialogFormRef" :cols-num="1" :fields="fieldsComputed" class="pt-1.5 px-1.5"></w-form>
+  </w-dialog>
+</template>
+<script setup lang="ts">
+import { t, Tools } from '@/platform';
+import { computed, inject, ref, toRaw } from 'vue';
+import { Constant, GridTools } from '../../ts/index';
+
+const dialogRef = ref();
+const dialogFormRef = ref();
+
+const tools = <GridTools>inject('tools');
+
+const fieldsComputed = computed(() => {
+  const fields = <any>[];
+  const cellSelected = tools.table.store.cellSelected;
+  if (cellSelected) {
+    const column = tools.editFM.getEditorFieldByName(cellSelected.colName);
+    if (column) {
+      fields.push({
+        ...column,
+        name: column['name'],
+        type: column['type'],
+        label: column['label'],
+        defaultValue: cellSelected.value,
+      });
+    }
+  }
+  return fields;
+});
+
+const saveLoading = ref(false);
+const dialog = {
+  title: t('action.edit'),
+  buttons: [
+    {
+      icon: 'beenhere',
+      labelI18nKey: tools.props.localMode ? 'confirm' : 'action.submit',
+      label: t(tools.props.localMode ? 'confirm' : 'action.submit'),
+      loading: saveLoading.value,
+      click: async () => {
+        saveLoading.value = true;
+        const result = await dialogFormRef.value.validate();
+        if (result) {
+          const cellSelected = tools.table.store.cellSelected;
+          if (!cellSelected) {
+            return;
+          }
+          const data = dialogFormRef.value.getData();
+          const row = tools.dataFM.getRow(tools.table.rows, cellSelected.row[Constant.FIELD_NAMES.ROW_KEY], false);
+          if (row) {
+            row[cellSelected.colName] = data[cellSelected.colName];
+            // 判定是否需要往后端发送修改操作
+            if (!tools.props.localMode) {
+              const data = GridTools.removeExtraFields(toRaw(row));
+              const url = getUrl(data[tools.props.primaryKey]);
+              const callback = () => {
+                saveLoading.value = false;
+                dialogRef.value.hide();
+              };
+              const errorCallback = () => {
+                saveLoading.value = false;
+              };
+              tools.reqApiFM.save('PUT', data, url, dialogFormRef.value, callback, errorCallback);
+            } else {
+              dialogRef.value.hide();
+            }
+          }
+        }
+        saveLoading.value = false;
+      },
+    },
+  ],
+};
+
+const getUrl = (primaryKey) => {
+  if (!Tools.isEmpty(tools.table.url.editDataUrl)) {
+    return tools.table.url.editDataUrl + '/' + primaryKey;
+  } else {
+    return tools.table.url.dataUrl + '/' + primaryKey;
+  }
+};
+
+const getDialog = () => {
+  return dialogRef.value;
+};
+const getForm = () => {
+  return dialogFormRef.value;
+};
+
+defineExpose({
+  getDialog,
+  getForm,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditComponent.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditComponent.vue
new file mode 100644
index 00000000..0e6661c9
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditComponent.vue
@@ -0,0 +1,71 @@
+<template>
+  <template v-if="isDirectlyBindComputed">
+    <component
+      :is="componentProps['type']"
+      :ref="(el) => tools.editFM.setComponentRef(el, props.row, props.col)"
+      v-bind="{ ...componentProps, label: undefined }"
+      v-model="gridRow[props.col['name']]"
+      bg-color="light-green-1"
+      @blur="
+        () => {
+          if (needExit()) {
+            tools.editFM.exitInlineEdit();
+          }
+        }
+      "
+    ></component>
+  </template>
+  <template v-else>
+    <component
+      :is="componentProps['type']"
+      :ref="(el) => tools.editFM.setComponentRef(el, props.row, props.col)"
+      v-bind="{ ...componentProps, label: undefined }"
+      v-model="gridRow[Constant.FIELD_NAMES.ROW_OLD_VALUE][props.col['name']]"
+      bg-color="light-green-1"
+      @blur="
+        () => {
+          if (needExit()) {
+            tools.editFM.exitInlineEdit();
+          }
+        }
+      "
+    ></component>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { GridTools, Constant } from '../../ts/index';
+
+const tools = <GridTools>inject('tools');
+const props = defineProps({
+  col: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  row: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+const gridRow = tools.dataFM.getRow(tools.table.rows, props.row[Constant.FIELD_NAMES.ROW_KEY], false);
+const componentProps = tools.editFM.getEditorFieldByName(props.col['name']);
+
+/**
+ * 是否直接绑定数据
+ */
+const isDirectlyBindComputed = computed(() => {
+  return tools.props.localMode && tools.table.store.inlineEditStatus !== Constant.EDIT_STATUS.ROWS;
+});
+
+const needExit = () => {
+  if (tools.props.localMode && tools.props.selectMode === Constant.SELECT_MODE.CELL && tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
+    return true;
+  }
+  return false;
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditToolbar.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditToolbar.vue
new file mode 100644
index 00000000..038cb058
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/inline-edit/InlineEditToolbar.vue
@@ -0,0 +1,249 @@
+<template>
+  <q-tr v-if="showComputed">
+    <q-td :colspan="tools.cm.displayColumnNum.value">
+      <div class="editButton text-center">
+        <w-toolbar v-model="buttons" :dense="true" align="center" :grid="tools.instance"></w-toolbar>
+      </div>
+    </q-td>
+  </q-tr>
+</template>
+<script setup lang="ts">
+import { NotifyManager, Tools, $t } from '@/platform';
+import { computed, inject, ref } from 'vue';
+import { Constant, GridTools } from '../../ts/index';
+
+const tools = <GridTools>inject('tools');
+const props = defineProps({
+  row: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+const buttons = ref([
+  {
+    label: '保存',
+    name: 'save',
+    icon: 'save',
+    color: 'primary',
+    outline: false,
+    click: async (args) => {
+      save(args);
+    },
+  },
+  {
+    label: '取消',
+    name: 'cancel',
+    icon: 'close',
+    color: 'blue-grey',
+    outline: false,
+    click: (args) => {
+      if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW || tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
+        tools.dataFM.setOldValue(args.selected);
+      } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS) {
+        tools.apiFM.getData.getRows().forEach((item) => {
+          tools.dataFM.setOldValue(item);
+        });
+      }
+      tools.table.store.inlineEditStatus = Constant.EDIT_STATUS.NONE;
+    },
+  },
+]);
+
+const showComputed = computed(() => {
+  if (tools.props.localMode && tools.table.store.inlineEditStatus !== Constant.EDIT_STATUS.ROWS) {
+    return false;
+  }
+  if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
+    const selected = tools.apiFM.getData.getSelectedCell();
+    if (
+      selected?.colName &&
+      selected.colName === tools.table.store.cellSelected?.colName &&
+      selected.row[Constant.FIELD_NAMES.ROW_KEY] === props.row[Constant.FIELD_NAMES.ROW_KEY]
+    ) {
+      return true;
+    }
+    return false;
+  } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW && tools.dataFM.isSelectedRow(props.row[Constant.FIELD_NAMES.ROW_KEY])) {
+    return true;
+  } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS && tools.table.rows.length > 0 && isLastRowComputed.value) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+const isLastRowComputed = computed(() => {
+  return tools.dataFM.isLastRow(props.row);
+});
+
+const validate = async (refs) => {
+  let result = true;
+  for (let i = 0; i < refs.length; i++) {
+    const component = refs[i];
+    if (component && !Tools.isEmpty(component.validate)) {
+      const componentValidateResult = await component.validate();
+      if (!componentValidateResult) {
+        result = false;
+        break;
+      }
+    }
+  }
+  return result;
+};
+
+const save = async (args) => {
+  let refs: any = undefined;
+  if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
+    refs = [tools.editFM.getComponentRef(args.selected[Constant.FIELD_NAMES.ROW_KEY], args.selectedColName)];
+  } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW) {
+    refs = tools.editFM.getComponentRefs(args.selected[Constant.FIELD_NAMES.ROW_KEY]);
+  } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS) {
+    refs = tools.editFM.getComponentRefs([]);
+  }
+  const result = await validate(refs);
+  if (!result) {
+    NotifyManager.error('验证未通过');
+  } else {
+    if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW || tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
+      rowSave(args);
+    } else if (tools.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS) {
+      rowsSave(args);
+    }
+  }
+};
+
+const rowSave = (args) => {
+  let data = args.selected[Constant.FIELD_NAMES.ROW_OLD_VALUE];
+  let submitFlag = true;
+  let localeUpdateFlag = false;
+  let url = '';
+  // 执行保存
+  tools.em.beforeEditorDataSubmit({
+    grid: tools.instance,
+    data: data,
+    callback: (handlerRequestParams: any | boolean, localeUpdate: boolean = false) => {
+      if (typeof handlerRequestParams === 'boolean' && handlerRequestParams === false) {
+        submitFlag = false;
+      } else {
+        data = handlerRequestParams;
+      }
+      localeUpdateFlag = localeUpdate;
+    },
+  });
+  if (localeUpdateFlag && submitFlag) {
+    // 只进行本地修改，不访问服务器
+    tools.apiFM.localMode.updateLocalData(data);
+    tools.table.store.inlineEditStatus = Constant.EDIT_STATUS.NONE;
+  } else {
+    if (submitFlag) {
+      data = { ...args.selected, ...data };
+      if (!Tools.isEmpty(tools.table.url.editDataUrl)) {
+        url = tools.table.url.editDataUrl + '/' + args.selected[tools.props.primaryKey];
+      } else {
+        url = tools.table.url.dataUrl + '/' + args.selected[tools.props.primaryKey];
+      }
+      const callback = (resp) => {
+        if (tools.props.refreshData || !tools.props.tree) {
+          tools.apiFM.operator.refreshGrid();
+        } else if (resp.data) {
+          tools.apiFM.localMode.updateLocalData(data);
+        }
+        tools.editFM.exitInlineEdit();
+      };
+      const errorCallback = (error) => {
+        if (error?.response.data.code === 1001) {
+          NotifyManager.error('服务器验证未通过');
+        }
+      };
+      tools.reqApiFM.save('PUT', data, url, undefined, callback, errorCallback);
+    }
+  }
+};
+
+const rowsSave = (args) => {
+  let data = <any>[];
+  const rows = args.grid.getRows();
+  const isTree = tools.props.tree;
+  rows.forEach((item) => {
+    if (checkDataModified(item)) {
+      data.push(item[Constant.FIELD_NAMES.ROW_OLD_VALUE]);
+    }
+    if (isTree && item.children) {
+      const childrenData = treeDataPush(item.children);
+      if (childrenData.length > 0) {
+        data.push(...childrenData);
+      }
+    }
+  });
+  let submitFlag = true;
+  let localeUpdateFlag = false;
+  // 执行保存
+  tools.em.afterEditorDataSubmit({
+    grid: tools.instance,
+    data: data,
+    callback: (handlerRequestParams: any | boolean, localeUpdate: boolean = false) => {
+      if (typeof handlerRequestParams === 'boolean' && handlerRequestParams === false) {
+        submitFlag = false;
+      } else {
+        data = handlerRequestParams;
+      }
+      localeUpdateFlag = localeUpdate;
+    },
+  });
+  if ((localeUpdateFlag && submitFlag) || tools.props.localMode) {
+    // 只进行本地修改，不访问服务器
+    data.forEach((item) => {
+      tools.apiFM.localMode.updateLocalData(item);
+    });
+    tools.table.store.inlineEditStatus = Constant.EDIT_STATUS.NONE;
+  } else {
+    if (submitFlag) {
+      tools.reqApiFM.updates(data, (callbackData) => {
+        NotifyManager.info($t('tip.operationSuccess'));
+        if (tools.props.refreshData || !tools.props.tree) {
+          tools.apiFM.operator.refreshGrid();
+        } else if (!Tools.isEmpty(callbackData)) {
+          callbackData.forEach((item) => {
+            tools.apiFM.localMode.updateLocalData(item);
+          });
+        }
+        tools.editFM.exitInlineEdit();
+      });
+    }
+  }
+};
+
+// 检查数据是否修改过
+const checkDataModified = (row) => {
+  const keys = Object.keys(row[Constant.FIELD_NAMES.ROW_OLD_VALUE]);
+  return keys.some((key) => row[key] !== row[Constant.FIELD_NAMES.ROW_OLD_VALUE][key]);
+};
+
+const treeDataPush = (arr) => {
+  const data = <any>[];
+  if (arr && arr.length > 0) {
+    arr.forEach((item) => {
+      if (checkDataModified(item)) {
+        data.push(item[Constant.FIELD_NAMES.ROW_OLD_VALUE]);
+      }
+      const childrenData = treeDataPush(item.children);
+      if (childrenData.length > 0) {
+        data.push(...childrenData);
+      }
+    });
+  }
+  return data;
+};
+</script>
+
+<style lang="css">
+.editButton {
+  position: sticky;
+  background-color: white;
+  left: 45%;
+  width: 150px;
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/Base.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/Base.ts
new file mode 100644
index 00000000..1be44b91
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/Base.ts
@@ -0,0 +1,48 @@
+import { Tools } from '@/platform';
+import { GridTools } from './GridTools';
+import { TableType } from './types/TableType';
+import type { PropsType } from './types/PropsType';
+
+/**
+ * w-grid 基类
+ */
+export class Base {
+  /**
+   * w-grid 配置属性
+   */
+  props: PropsType;
+  /**
+   * w-grid 表格全局变量管理类，可供所有子组件直接使用，避免通过组件属性反复传递。
+   */
+  table: TableType;
+  /**
+   * w-grid 组件实例
+   */
+  instance?: any;
+  /**
+   * w-grid 工具类
+   */
+  tools?: GridTools;
+
+  constructor(props: PropsType, table: TableType) {
+    this.props = props;
+    this.table = table;
+  }
+
+  instanceError() {
+    if (Tools.isEmpty(this.instance)) {
+      throw new Error('[w-grid] The `instance` variable of `FunctionTools` class is undefined.');
+    }
+  }
+  tableError() {
+    if (Tools.isEmpty(this.table)) {
+      throw new Error('[w-grid] The `table` variable of `FunctionTools` class is undefined.');
+    }
+  }
+
+  // 设置组件实例
+  setInstance(instance: any, tools?: GridTools) {
+    this.instance = instance;
+    this.tools = tools;
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/GridTools.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/GridTools.ts
new file mode 100644
index 00000000..fd5bd1e5
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/GridTools.ts
@@ -0,0 +1,328 @@
+import { reactive } from 'vue';
+import { Constant } from './constant/Constant';
+import { TableType } from './types/TableType';
+import type { PropsType } from './types/PropsType';
+import { Init } from './Init';
+import { getCssVar } from 'quasar';
+import { Environment, Tools } from '@/platform';
+
+import { ComputedManager } from './computed/ComputedManager';
+import { EventManager } from './event/EventManager';
+import { ExposeApiManager } from './expose-api/ExposeApiManager';
+import { Criteria } from './function/Criteria';
+import { DragAndDrop } from './function/DragAndDrop';
+import { InlineEdit } from './function/InlineEdit';
+import { Operator } from './function/Operator';
+import { RequestApi } from './function/RequestApi';
+import { RowData } from './function/RowData';
+import { ButtonManager } from './toolbar/ButtonManager';
+
+/**
+ * w-grid 工具类
+ */
+export class GridTools {
+  /**
+   * w-grid 配置属性
+   */
+  props: PropsType;
+  /**
+   * w-grid 表格全局变量管理类，可供所有子组件直接使用，避免通过组件属性反复传递。
+   */
+  table: TableType;
+  /**
+   * w-grid 组件实例
+   */
+  instance?: any;
+
+  /**
+   * 表格事件管理器
+   */
+  em: EventManager;
+  /**
+   * 计算属性管理器
+   */
+  cm: ComputedManager;
+  /**
+   * 表格内置按钮管理器
+   */
+  bm: ButtonManager;
+  /**
+   * 对外暴露api 函数管理器
+   */
+  apiFM: ExposeApiManager;
+  /**
+   * 行数据处理函数管理器
+   */
+  dataFM: RowData;
+  /**
+   * 表格操作函数管理器
+   */
+  opFM: Operator;
+  /**
+   * 内联编辑函数管理器
+   */
+  editFM: InlineEdit;
+  /**
+   * 拖拽排序函数管理器
+   */
+  dndFM: DragAndDrop;
+  /**
+   * 请求后端API函数管理器
+   */
+  reqApiFM: RequestApi;
+  /**
+   * criteria 查询函数管理器
+   */
+  criteriaFM: Criteria;
+
+  constructor(props: PropsType) {
+    this.props = props;
+
+    const darkCssVar = getCssVar('dark') || '';
+    const gc = Environment.getConfigure();
+
+    const dense = props.dense !== undefined ? props.dense : false;
+    const denseBottom = props.denseBottom !== undefined ? props.denseBottom : false;
+    let bodyCellHeight = 48;
+    if (denseBottom) {
+      bodyCellHeight = 24;
+    } else if (dense !== false) {
+      bodyCellHeight = 24;
+    }
+
+    let alongGroupByField: any = undefined;
+    if (this.props.groupMode === Constant.GROUP_MODE.ALONE) {
+      if (typeof this.props.groupByField === 'string') {
+        alongGroupByField = this.props.groupByField;
+      } else if (Array.isArray(this.props.groupByField)) {
+        alongGroupByField = this.props.groupByField[0];
+      }
+    }
+
+    this.table = reactive({
+      originalColumns: [...props.columns],
+      columns: Init.initColumn(props.columns, props),
+      rows: [],
+      queryCriteria: { ...props.queryCriteria },
+      moreQueryStatus: false,
+      advancedQueryStatus: false,
+      advancedQueryModelValue: undefined,
+      queryFormDisplayFields: [],
+      componentRef: {
+        getTableRef: () => {},
+        getTopRef: () => {},
+        getHeaderRef: () => {},
+        getBodyRef: () => {},
+        getEditorRef: () => {},
+        getCellEditorRef: () => {},
+        getViewRef: () => {},
+      },
+      color: {
+        darkBgColor: darkCssVar,
+        headBgColor: gc.theme.dark ? darkCssVar : gc.theme?.grid?.headBgColor || '#f5f7fa',
+        borderColor: gc.theme?.grid?.borderColor || 'rgba(0, 0, 0, 0.12)',
+        stickyBgColor: gc.theme.dark ? darkCssVar : gc.theme?.grid?.stickyBgColor || '#ffffff',
+      },
+      url: {
+        dataUrl: props.dataUrl,
+        fetchDataUrl: props.fetchDataUrl,
+        addDataUrl: props.addDataUrl,
+        editDataUrl: props.editDataUrl,
+        removeDataUrl: props.removeDataUrl,
+      },
+      configStore: {
+        showConfigPanel: false,
+        isFullscreen: false,
+        separator: props.separator,
+        stickyNum: props.stickyNum,
+        useCheckboxSelection: props.checkboxSelection,
+        showSortNo: props.sortNo,
+        dense: dense,
+        denseToolbar: props.denseToolbar !== undefined ? props.denseToolbar : false,
+        denseHeader: props.denseHeader !== undefined ? props.denseHeader : false,
+        denseBody: props.denseBody !== undefined ? props.denseBody : false,
+        denseBottom: denseBottom,
+        aloneGroupRecords: [],
+        aloneGroupByField: alongGroupByField,
+      },
+      store: {
+        expand: props.treeDefaultExpandAll,
+        expandDatas: [],
+        alreadyLoadAllData: false,
+        lazyloadNoChildrenDatas: [],
+        headerTicked: false,
+        dragRecords: [],
+        inlineEditStatus: Constant.EDIT_STATUS.NONE,
+        cellSelected: undefined,
+        mergeGroupRecords: {},
+        spaceHeight: 4,
+        noDataLabelI18nKey: 'tip.noData',
+        loading: false,
+        loadingLabelI18nKey: 'tip.dataLoading',
+        bodyCellHeight: bodyCellHeight,
+        resizeFlag: false,
+        location: {
+          yLocation: 0,
+          noDataTrYLocation: 0,
+          topHeight: 0,
+          bottomHeight: 0,
+          middleWidth: 0,
+          middleScrollWidth: 0,
+          middleHeight: 0,
+          columnHeadHeight: 0,
+          titleTotalHeight: 0,
+          hideHeaderNoDataHeight: 0,
+          tableInFullscreenY: 0,
+          noDataTrInFullscreenY: 0,
+        },
+        pagination: {
+          config: {
+            boundaryLinks: true,
+            boundaryNumbers: false,
+            directionLinks: false,
+            ellipses: false,
+            maxPages: 5,
+          },
+          sortBy: '',
+          descending: false,
+          reqPageStart: props.pagination['reqPageStart'] || 0,
+          page: 1,
+          rowsPerPage: props.pagination['rowsPerPage'] || 10,
+          rowsNumber: 10,
+          rowsPerPageOptions: [5, 10, 20, 50, 100],
+        },
+      },
+    });
+
+    this.em = new EventManager(props, this.table);
+    this.cm = new ComputedManager(props, this.table);
+    this.bm = new ButtonManager(props, this.table);
+    this.apiFM = new ExposeApiManager(props, this.table);
+    this.dataFM = new RowData(props, this.table);
+    this.opFM = new Operator(props, this.table);
+    this.editFM = new InlineEdit(props, this.table);
+    this.dndFM = new DragAndDrop(props, this.table);
+    this.reqApiFM = new RequestApi(props, this.table);
+    this.criteriaFM = new Criteria(props, this.table);
+  }
+
+  // 设置组件实例
+  setInstance(instance: any) {
+    const this_ = this;
+    this.instance = instance;
+    this.em.setInstance(instance, this_);
+    this.cm.setInstance(instance, this_);
+    this.apiFM.setInstance(instance, this_);
+    this.bm.setInstance(instance, this_);
+    this.dataFM.setInstance(instance, this_);
+    this.opFM.setInstance(instance, this_);
+    this.editFM.setInstance(instance, this_);
+    this.dndFM.setInstance(instance, this_);
+    this.reqApiFM.setInstance(instance, this_);
+    this.criteriaFM.setInstance(instance, this_);
+  }
+
+  /**
+   * 移除表格数据中附加的字段
+   * @param target
+   */
+  static removeExtraFields(target: any) {
+    if (!target) {
+      console.error('[w-grid] target is undefined.');
+      return;
+    }
+    if (Array.isArray(target)) {
+      const tmp = [...target];
+      tmp.forEach((item) => {
+        GridTools.removeFields(item);
+      });
+      return tmp;
+    } else {
+      const tmp = { ...target };
+      GridTools.removeFields(tmp);
+      return tmp;
+    }
+  }
+
+  private static removeFields(target: any) {
+    if (Tools.hasOwnProperty(target, Constant.FIELD_NAMES.ROW_KEY)) {
+      delete target[Constant.FIELD_NAMES.ROW_KEY];
+    }
+    if (Tools.hasOwnProperty(target, Constant.FIELD_NAMES.EXPAND)) {
+      delete target[Constant.FIELD_NAMES.EXPAND];
+    }
+    if (Tools.hasOwnProperty(target, Constant.FIELD_NAMES.TICKED_COUNT)) {
+      delete target[Constant.FIELD_NAMES.TICKED_COUNT];
+    }
+    if (Tools.hasOwnProperty(target, Constant.FIELD_NAMES.CHILDREN_TICKED_COUNT)) {
+      delete target[Constant.FIELD_NAMES.CHILDREN_TICKED_COUNT];
+    }
+    if (Tools.hasOwnProperty(target, Constant.FIELD_NAMES.ROW_OLD_VALUE)) {
+      delete target[Constant.FIELD_NAMES.ROW_OLD_VALUE];
+    }
+    if (Tools.hasOwnProperty(target, Constant.FIELD_NAMES.ROW_INDEX)) {
+      delete target[Constant.FIELD_NAMES.ROW_INDEX];
+    }
+    if (Tools.hasOwnProperty(target, Constant.FIELD_NAMES.LAZYLOAD_NO_CHILDREN)) {
+      delete target[Constant.FIELD_NAMES.LAZYLOAD_NO_CHILDREN];
+    }
+  }
+
+  /**
+   * 对象数组转对象
+   * 说明：[{id: 1, value: '张三'}, {id: 2, value: '李四'}] ==> { 1: { id: 1, value: '张三' }, 2: { id: 2, value: '李四'} }
+   * @param array 对象数组
+   * @param propertyName 属性名
+   * @returns 转换结果
+   */
+  static arrayToObject(array: Array<any>, propertyName: string) {
+    const result = array.reduce((tmp, item) => {
+      tmp[item[propertyName]] = item;
+      return tmp;
+    }, {});
+    return result;
+  }
+
+  /**
+   * 构建孩子行所需的 scope 属性
+   * @param currentScope 当前scope
+   * @param child 孩子行数据
+   * @param childIndex 孩子行下标
+   * @param selectedFieldName 选中配置的字段名
+   * @returns
+   */
+  static buildChildrenScope(currentScope: any, child: any, childIndex: number, selectedFieldName: string, tickedFieldName: string) {
+    const cols = GridTools.buildChildrenCols(currentScope, child);
+    const childScope = {
+      ...currentScope,
+      cols: cols,
+      key: child[Constant.FIELD_NAMES.ROW_KEY],
+      [Constant.FIELD_NAMES.EXPAND]: child[Constant.FIELD_NAMES.EXPAND],
+      pageIndex: childIndex,
+      rowIndex: childIndex,
+      row: child,
+      [selectedFieldName]: child[selectedFieldName],
+      [tickedFieldName]: child[tickedFieldName],
+    };
+    return childScope;
+  }
+  // 构建孩子行 scope 中 cols 属性
+  private static buildChildrenCols(currentScope: any, child: any) {
+    const cols = <any>[];
+    currentScope.cols.forEach((col) => {
+      cols.push({ ...col, value: GridTools.formatValue(child, col) });
+    });
+    return cols;
+  }
+  // 格式化值
+  private static formatValue(child: any, col: any) {
+    if (col.format && typeof col.format === 'function') {
+      try {
+        return col.format(child[col.name], child);
+      } catch (error) {
+        console.error('[w-grid]column `' + col.name + '` format error：', error);
+      }
+    }
+    return child[col.name];
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/Init.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/Init.ts
new file mode 100644
index 00000000..b1f43958
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/Init.ts
@@ -0,0 +1,226 @@
+import { Tools, $t } from '@/platform';
+import { Constant } from './index';
+
+/**
+ * 初始化工具类
+ */
+export class Init {
+  /**
+   * 创建 props 并设置默认值
+   * @returns
+   */
+  public static createProps() {
+    return {
+      height: { type: Number, default: 0 }, // 表格高度
+      title: { type: String, default: '' }, // 表格标题
+      autoFetchData: { type: Boolean, default: true }, // 自动加载数据
+      localMode: { type: Boolean, default: false }, // 本地模式，启用该模式后，除了查询数据依旧通过 autoFetchData 与 url 控制外，其他所有与后端交互的请求都失效，同时分页属性也失效
+      selectMode: { type: String, default: Constant.SELECT_MODE.ROW }, // 选择模式
+      dndMode: { type: String, default: undefined }, // 拖拽数据行排序的模式，默认不可拖拽，字符串`local`为本地排序，只根据配置的字段进行本地排序，不会将数据发送至后端，字符串`server`为远程排序，拖拽完成后会将数据发送至后端。
+      dndOrderBy: { type: String, default: 'order' }, // 拖拽排序时根据哪个字段进行排序，默认为`order`字段
+      pageable: { type: Boolean, default: true }, // 是否需要分页，当启用树形表格模式时该属性失效，树形表格不支持分页。
+      configButton: { type: Boolean, default: true }, // 是否显示表格配置按钮
+      dataUrl: { type: String, default: '' }, // 表格数据操作请求的URL前缀
+      fetchDataUrl: { type: String, default: '' }, // 获取数据URL
+      addDataUrl: { type: String, default: '' }, // 新增数据url
+      editDataUrl: { type: String, default: '' }, // 修改数据url
+      removeDataUrl: { type: String, default: '' }, // 删除数据url
+      dense: { type: Boolean, default: undefined }, // 表格整体紧凑模式
+      denseHeader: { type: Boolean, default: undefined }, // 表格列标题紧凑模式
+      denseBody: { type: Boolean, default: undefined }, // 表格数据行紧凑模式
+      denseBottom: { type: Boolean, default: undefined }, // 表格底部分页栏紧凑模式
+      denseToolbar: { type: Boolean, default: true }, // 表格toolbar按钮栏紧凑模式
+      sortNo: { type: Boolean, default: false }, // 是否显示排序号
+      stickyNum: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，支持1-10列。
+      checkboxSelection: { type: Boolean, default: true }, // checkbox选择模式，默认启用
+      tickedField: { type: String, default: 'ticked' }, // 行数据中记录checkbox勾选状态的字段名
+      selectedField: { type: String, default: 'selected' }, // 行数据中记录行点击选中状态的字段名
+      tree: { type: Boolean, default: false }, // 树形表格模式，按照层级关系构建数据并以树形展现
+      treeLazyLoad: { type: Boolean, default: false }, // 树型表格模式，懒加载
+      treeIcon: { type: Function, default: undefined }, // 树形表格模式，图标函数，带有一个参数，行数据
+      treeDefaultExpandAll: { type: Boolean, default: false }, // 树形表格模式，树形表格数据加载后是否全部展开
+      treeTickStrategy: { type: String, default: 'leaf' }, // 树形表格模式，树勾选策略，strict：节点自己，leaf：包含子节点
+      treeRelationship: { type: String, default: 'parent' }, // 树形表格模式的数据关系，包括：parent, children，当为parent时组件根据数据主键与数据外键构建树形数据，否则需要自己构建好树形数据放到children属性中。
+      primaryKey: { type: String, default: 'id' }, // 数据主键（常规表格模式时，该字段可用作内置的编辑删除等功能对应的后端API入参，如：继承RestCrudController的update所需的入参。树形表格模式时，该字段为构建树数据的主键）
+      foreignKey: { type: String, default: 'parent' }, // 数据外键（常规表格模式时，该字段暂时无用，将来可用作多个表格的数据关系字段。树形表格模式时，该字段为构建树数据的关系字段）
+      refreshData: { type: Boolean, default: false }, // 新增、删除、修改成功后是否刷新数据列表，默认不刷新但是新增修改后台必须返回对应的行数据对象，删除则必须返回删除的记录集primaryKey集合。
+      dbClickOperation: { type: String, default: 'view' }, // 默认的双击操作：可填写内置或自定义按钮name，执行的操作为按钮对应的click，固定值提供：expand(展开双击的行)、none(双击不执行任何动作)
+      separator: { type: String, default: 'cell' }, // 表格分割线，支持：horizontal、vertical、cell、none
+      hideHeader: { type: Boolean, default: false }, // 隐藏表头
+      hideBottom: { type: Boolean, default: false }, // 隐藏底部
+      advancedQuery: { type: Boolean, default: false }, // 高级查询
+      groupMode: { type: String, default: undefined }, // 分组模式，支持：alone、merge
+      groupStartOpen: { type: [String, Array, Function], default: Constant.GROUP_START_OPEN.ALL }, // alone分组模式下默认展开的组，字符串支持：all、first、none，数组可配置多个组名。
+      groupByField: {
+        // 分组字段配置，当分组模式为 alone 时若配置的为数组，取数组第一个字段。
+        type: [String, Array],
+        default: () => {
+          return [];
+        },
+      },
+      appendRows: {
+        // 表格追加行，添加到当前表格数据行尾，可添加多行，支持跨行跨列配置，用于添加合计或者额外信息。
+        type: Array,
+        default: () => {
+          return [];
+        },
+      },
+      sortBy: {
+        type: Array,
+        default: () => {
+          return [];
+        },
+      }, // 默认排序字段，示例：['userName', '-lastModifyDate']，其中“-”开头表示倒序。
+      tickedRecord: {
+        // 默认勾选的记录，传入一个对象，包含：columnName（列名称，字符串类型，该属性不传默认根据数据主键查找）、data（需要勾选的数据，数组类型）
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      queryCriteria: {
+        // 查询条件，查询、翻页、刷新等操作都会带上的查询条件
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      columns: {
+        type: Array,
+        default: () => {
+          return [];
+        },
+      },
+      queryFormFields: {
+        type: Array,
+        default: () => {
+          return [];
+        },
+      },
+      queryFormColsNum: {
+        type: [Number, Object],
+        default: 0,
+      },
+      queryFormRowNum: { type: Number, default: 1 },
+      queryFormAttrs: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      toolbarActions: {
+        type: Array,
+        default: () => {
+          return [];
+        },
+      },
+      toolbarConfigure: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      pagination: {
+        type: Object,
+        default: () => {
+          return {
+            reqPageStart: 0,
+            rowsPerPage: 10,
+          };
+        },
+      },
+      editor: {
+        type: Object,
+        default: () => {
+          return {
+            dialog: {},
+            form: {},
+          };
+        },
+      },
+      viewer: {
+        type: Object,
+        default: () => {
+          return {
+            drawer: {},
+            panel: {
+              fields: [],
+            },
+          };
+        },
+      },
+      // 作为form中的组件使用----start
+      showIf: {
+        type: [Boolean, Function],
+        default: () => {
+          return true;
+        },
+      },
+      form: {
+        type: Object,
+        default: undefined,
+      },
+      // 作为form中的组件使用----end
+    };
+  }
+
+  /**
+   * 列初始化，设置默认属性并将子列提取到同级
+   * @param columns 所有列配置
+   * @param props 表格props
+   * @returns
+   */
+  public static initColumn(columns: Array<any>, props: any) {
+    const gridColumns = <any>[];
+    if (columns && columns.length > 0) {
+      const sortable = true;
+      gridColumns.push({ name: '_sortNo_', align: 'center', label: $t('rownum'), field: '_sortNo_', showIf: props.sortNo });
+      columns.forEach((item: any) => {
+        this.childrenHandler(item, gridColumns, sortable);
+      });
+      return gridColumns;
+    }
+    return [];
+  }
+
+  // 孩子列处理
+  private static childrenHandler(item: any, gridColumns: any, sortable: boolean) {
+    if (item.columns && item.columns.length > 0) {
+      item.columns.forEach((column) => {
+        this.childrenHandler(column, gridColumns, sortable);
+      });
+    } else {
+      this.columnStyle(item);
+      const col = {
+        ...{ align: 'left', label: item.name, field: item.name, name: item.name, sortable: sortable, showIf: true },
+        ...item,
+      };
+      if (Tools.isEmpty(col.name)) {
+        col.name = Tools.uuid();
+      }
+      gridColumns.push(col);
+    }
+  }
+
+  // 列样式处理
+  private static columnStyle(item: any) {
+    let style = '';
+    if (Tools.hasOwnProperty(item, 'style')) {
+      style = item.style;
+    }
+    if (Tools.hasOwnProperty(item, 'width')) {
+      if (typeof item.width === 'number') {
+        item.style = `min-width: ` + item.width + `px; width: ` + item.width + `px;max-width: ` + item.width + `px;` + style;
+      } else {
+        item.style = `min-width: ` + item.width + `; width: ` + item.width + `;max-width: ` + item.width + `;` + style;
+      }
+      delete item.width;
+
+      if (Tools.hasOwnProperty(item, 'classes')) {
+        item.classes = item.classes + ' truncate';
+      } else {
+        item.classes = 'truncate';
+      }
+    }
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/computed/ComputedManager.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/computed/ComputedManager.ts
new file mode 100644
index 00000000..9dda6a69
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/computed/ComputedManager.ts
@@ -0,0 +1,252 @@
+import { Tools } from '@/platform';
+import { computed } from 'vue';
+import { Base } from '../Base';
+import { Constant } from '../constant/Constant';
+import { GridTools } from '../GridTools';
+
+/**
+ * w-grid 表格计算属性管理器
+ * 主要是将多个组件都会用到的计算属性进行统一管理，避免通过组件反复传递
+ */
+export class ComputedManager extends Base {
+  /**
+   * 当前列头是否紧凑
+   */
+  denseHeader = computed(() => {
+    if (this.table?.configStore?.denseHeader) {
+      return true;
+    } else if (this.table?.configStore.dense !== false) {
+      return true;
+    } else {
+      return false;
+    }
+  });
+
+  /**
+   * 当前内容是否紧凑
+   */
+  denseBody = computed(() => {
+    if (this.table?.configStore?.denseBody) {
+      return true;
+    } else if (this.table?.configStore.dense !== false) {
+      return true;
+    } else {
+      return false;
+    }
+  });
+
+  /**
+   * 当前分页工具栏是否紧凑
+   */
+  denseBottom = computed(() => {
+    if (this.table?.configStore?.denseBottom) {
+      return true;
+    } else if (this.table?.configStore.dense !== false) {
+      return true;
+    } else {
+      return false;
+    }
+  });
+
+  /**
+   * 当前表格显示的所有列名
+   */
+  displayColumns = computed(() => {
+    const visibleColumns: string[] = [];
+    this.table?.columns.forEach((item) => {
+      if (!this.props.tree || (this.props.tree && item.name !== Constant.FIELD_NAMES.SORT_NO)) {
+        if (Tools.isEmpty(item.showIf)) {
+          visibleColumns.push(item.name);
+        } else if (typeof item.showIf === 'boolean' && item.showIf) {
+          visibleColumns.push(item.name);
+        }
+      }
+    });
+    return visibleColumns;
+  });
+
+  /**
+   * 合并分组时分组字段
+   */
+  mergeGroupByField = computed(() => {
+    if (typeof this.props.groupByField === 'string') {
+      [this.props.groupByField];
+    }
+    return this.props.groupByField;
+  });
+
+  /**
+   * 计算额外拓展的列数（排序号、checkbox复选框）
+   */
+  extColumnNum = computed(() => {
+    let num = 0;
+    if (this.props.tree) {
+      return num;
+    }
+    if (this.table?.configStore.showSortNo) {
+      num += 1;
+    }
+    if (this.table?.configStore.useCheckboxSelection) {
+      num += 1;
+    }
+    return num;
+  });
+
+  /**
+   * 计算当前表格显示的列数（包括拓展的排序号、checkbox复选框）
+   */
+  displayColumnNum = computed(() => {
+    let colspan = this.extColumnNum.value;
+    colspan += this.displayColumns.value.length;
+    return colspan;
+  });
+
+  /**
+   * 无数据块的样式
+   */
+  noDataStyle = computed(() => {
+    let style = {};
+    if (this.props.hideHeader) {
+      style = {
+        height: this.table?.store.location.hideHeaderNoDataHeight + 'px',
+        display: 'flex',
+        'align-items': 'center',
+        'justify-content': 'center',
+      };
+    } else {
+      let availableHeight = 0;
+      let otherHeight = 0;
+      let otherHeight2 = 0;
+
+      const parentHtmlElement = this.instance?.getHtmlElement()?.parentElement;
+      if (parentHtmlElement) {
+        availableHeight = Math.floor(parentHtmlElement.clientHeight);
+      }
+
+      otherHeight += this.table?.store.location.topHeight || 0;
+      otherHeight += this.table?.store.location.bottomHeight || 0;
+      otherHeight += this.table?.store.spaceHeight || 0;
+
+      otherHeight2 += this.table?.store.location.titleTotalHeight;
+      otherHeight2 += this.table?.store.location.middleScrollWidth - this.table?.store.location.middleWidth > 0 ? 15 : 0;
+
+      availableHeight -= otherHeight + otherHeight2;
+      availableHeight -= 2; //无数据增加的title行，下边框所占边框
+
+      style = {
+        height: this.props.height > 0 ? this.props.height - otherHeight2 - 1 + 'px' : availableHeight > 0 ? availableHeight + 'px' : '0px',
+      };
+    }
+    if (this.table?.store.resizeFlag) {
+      return style;
+    }
+    return style;
+  });
+
+  /**
+   * 内置按钮入参
+   */
+  actionArgs = computed(() => {
+    return {
+      selected: this.tools?.apiFM.getData.getSelectedRow(),
+      selecteds: this.tools?.apiFM.getData.getSelectedRows(),
+      ticked: this.tools?.apiFM.getData.getTickedRow(),
+      tickeds: this.tools?.apiFM.getData.getTickedRows(),
+      grid: this.instance,
+      selectedColName: this.table.store.cellSelected?.colName,
+    };
+  });
+
+  /**
+   * 表格样式
+   */
+  tableClass = computed(() => {
+    const classArr = ['sticky-header-column-table', 'w-grid'];
+    if (this.table.configStore.stickyNum && this.table.configStore.stickyNum > 0) {
+      if (this.table.componentRef.getHeaderRef().getColumnTitleState()?.columnTitleRowNum > 1) {
+        // 存在多行列头
+        const stickyColumn = this.table.originalColumns.filter((item, index) => {
+          return index < this.table.configStore.stickyNum;
+        });
+        let tdNum = this.extColumnNum.value;
+        stickyColumn.forEach((item: any, index: number) => {
+          tdNum += this.table.componentRef.getHeaderRef().getMoreColumnTitleMap()?.get(item.name)?.colspan;
+        });
+        // 处理表格数据列锁定
+        if (tdNum > 0) {
+          for (let n = 1; n <= tdNum; n++) {
+            classArr.push('sticky-header-column-table-td-' + n);
+          }
+        }
+      } else {
+        // 不存在多行列头
+        if (this.extColumnNum.value === 2) {
+          classArr.push('sticky-header-column-table-tr-1' + '-' + 1);
+          classArr.push('sticky-header-column-table-tr-1' + '-' + 2);
+          classArr.push('sticky-header-column-table-td-' + 1);
+          classArr.push('sticky-header-column-table-td-' + 2);
+        } else if (this.extColumnNum.value === 1) {
+          classArr.push('sticky-header-column-table-tr-1' + '-' + 1);
+          classArr.push('sticky-header-column-table-td-' + 1);
+        }
+        for (let i = 1; i <= this.table.configStore.stickyNum; i++) {
+          classArr.push('sticky-header-column-table-tr-1' + '-' + (i + this.extColumnNum.value));
+          classArr.push('sticky-header-column-table-td-' + (i + this.extColumnNum.value));
+        }
+      }
+    }
+    return classArr;
+  });
+
+  /**
+   * 表格高度样式
+   */
+  tableHeight = computed(() => {
+    let availableHeight = 0;
+    const parentHtmlElement = this.instance?.getHtmlElement()?.parentElement;
+    if (parentHtmlElement) {
+      availableHeight = Math.floor(parentHtmlElement.clientHeight);
+    }
+
+    availableHeight -= this.table?.store.location.topHeight || 0;
+    availableHeight -= this.table?.store.location.bottomHeight || 0;
+    availableHeight -= this.table?.store.spaceHeight || 0;
+
+    const style = {
+      height: this.props.height > 0 ? this.props.height + 'px' : availableHeight > 0 ? availableHeight + 'px' : '0px',
+    };
+    if (this.table?.store.resizeFlag) {
+      return style;
+    }
+    return style;
+  });
+
+  /**
+   * 用户可选分页大小配置
+   */
+  rowsPerPageOptions = computed(() => {
+    if (this.props.pageable && !this.props.localMode && !this.props.tree && this.table.store.location.middleWidth > 600) {
+      return this.table.store.pagination.rowsPerPageOptions;
+    }
+    return [];
+  });
+
+  /**
+   * 表格作为form中的字段使用时是否显示
+   */
+  showIf = computed(() => {
+    if (typeof this.props.showIf === 'function') {
+      return this.props.showIf({
+        value: null,
+        form: this.props.form,
+      });
+    } else {
+      return this.props.showIf;
+    }
+  });
+
+  setInstance(instance: any, tools?: GridTools): void {
+    this.instance = instance;
+    this.tools = tools;
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/Constant.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/Constant.ts
new file mode 100644
index 00000000..c8fd1821
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/Constant.ts
@@ -0,0 +1,58 @@
+import { SelectMode } from './src/SelectMode';
+import { DndMode } from './src/DndMode';
+import { GroupMode } from './src/GroupMode';
+import { GroupStartOpen } from './src/GroupStartOpen';
+
+import { FormStatus } from './src/FormStatus';
+import { EditStatus } from './src/EditStatus';
+
+import { FieldNames } from './src/FieldNames';
+import { CriteriaOperator } from './src/CriteriaOperator';
+
+/**
+ * w-grid 常量
+ */
+export class Constant {
+  /**
+   * 选择模式
+   */
+  static SELECT_MODE = SelectMode;
+
+  /**
+   * 拖拽排序模式
+   */
+  static DND_MODE = DndMode;
+  /**
+   * 拖拽过程中透明背景图
+   */
+  static DND_BG_IMAGE = `data:image/svg+xml,%3Csvg %3E%3Cpath /%3E%3C/svg%3E`;
+
+  /**
+   * 数据分组模式
+   */
+  static GROUP_MODE = GroupMode;
+  /**
+   * 独立分组模式下默认展开的记录
+   */
+  static GROUP_START_OPEN = GroupStartOpen;
+
+  /**
+   * Form表单状态
+   */
+  static FORM_STATUS = FormStatus;
+
+  /**
+   * 内联编辑状态
+   */
+  static EDIT_STATUS = EditStatus;
+
+  /**
+   * 行数据字段名称定义
+   */
+  static FIELD_NAMES = FieldNames;
+
+  /**
+   * criteria查询支持的操作
+   */
+  static CRITERIA_OPERATOR = CriteriaOperator;
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/CriteriaOperator.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/CriteriaOperator.ts
new file mode 100644
index 00000000..3c900059
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/CriteriaOperator.ts
@@ -0,0 +1,85 @@
+/**
+ * criteria查询支持的操作
+ */
+export class CriteriaOperator {
+  /**
+   * value is null or value=''
+   */
+  static isBlank = 'isBlank';
+  /**
+   * value is not null && value<>''
+   */
+  static notBlank = 'notBlank';
+  /**
+   * value is null
+   */
+  static isNull = 'isNull';
+  /**
+   * value is not null
+   */
+  static notNull = 'notNull';
+  /**
+   * =
+   */
+  static equals = 'equals';
+  /**
+   * <>
+   */
+  static notEqual = 'notEqual';
+  /**
+   * >
+   */
+  static greaterThan = 'greaterThan';
+  /**
+   * >=
+   */
+  static greaterOrEqual = 'greaterOrEqual';
+  /**
+   * <
+   */
+  static lessThan = 'lessThan';
+  /**
+   * <=
+   */
+  static lessOrEqual = 'lessOrEqual';
+  /**
+   * like %xxx%
+   */
+  static contains = 'contains';
+  /**
+   * not like %xxx%
+   */
+  static notContains = 'notContains';
+  /**
+   * like xxx%
+   */
+  static startsWith = 'startsWith';
+  /**
+   * not like xxx%
+   */
+  static notStartsWith = 'notStartsWith';
+  /**
+   * like %xxx
+   */
+  static endsWith = 'endsWith';
+  /**
+   * not like %xxx
+   */
+  static notEndsWith = 'notEndsWith';
+  /**
+   * min<x and x<max
+   */
+  static between = 'between';
+  /**
+   * min<=x and x<=max
+   */
+  static betweenInclusive = 'betweenInclusive';
+  /**
+   * in ()
+   */
+  static inSet = 'inSet';
+  /**
+   * not in ()
+   */
+  static notInSet = 'notInSet';
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/DndMode.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/DndMode.ts
new file mode 100644
index 00000000..c12d7627
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/DndMode.ts
@@ -0,0 +1,24 @@
+/**
+ * 拖拽排序模式
+ */
+export class DndMode {
+  /**
+   * 本地模式
+   */
+  public static LOCAL = 'local';
+  /**
+   * 服务端模式
+   */
+  public static SERVER = 'server';
+
+  /**
+   * 获得所有拖拽排序模式对象
+   * @returns
+   */
+  public static getAll() {
+    return {
+      [DndMode.LOCAL]: DndMode.LOCAL,
+      [DndMode.SERVER]: DndMode.SERVER,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/EditStatus.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/EditStatus.ts
new file mode 100644
index 00000000..99e2baf2
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/EditStatus.ts
@@ -0,0 +1,34 @@
+/**
+ * 内联编辑状态
+ */
+export class EditStatus {
+  /**
+   * 不在编辑状态
+   */
+  public static NONE = 'none';
+  /**
+   * 单元格编辑状态
+   */
+  public static CELL = 'cellEdit';
+  /**
+   * 行编辑状态
+   */
+  public static ROW = 'rowEdit';
+  /**
+   * 所有行编辑状态
+   */
+  public static ROWS = 'rowsEdit';
+
+  /**
+   * 获得所有内联编辑状态对象
+   * @returns
+   */
+  public static getAll() {
+    return {
+      [EditStatus.NONE]: EditStatus.NONE,
+      [EditStatus.CELL]: EditStatus.CELL,
+      [EditStatus.ROW]: EditStatus.ROW,
+      [EditStatus.ROWS]: EditStatus.ROWS,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/FieldNames.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/FieldNames.ts
new file mode 100644
index 00000000..55c6a2eb
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/FieldNames.ts
@@ -0,0 +1,63 @@
+/**
+ * 行数据字段名称定义
+ */
+export class FieldNames {
+  /**
+   * 前端主键
+   */
+  public static ROW_KEY = '_rowKey_';
+
+  /**
+   * 排序号
+   */
+  public static SORT_NO = '_sortNo_';
+
+  /**
+   * 树型表格行数据是否展开状态
+   */
+  public static EXPAND = 'expand';
+
+  /**
+   * 树型表格行数据用于处理父节点勾选状态的属性（记录自身勾选数量，要么为0要么为1）
+   */
+  public static TICKED_COUNT = '_tickedCount';
+
+  /**
+   * 树型表格行数据用于处理父节点勾选状态的属性（记录子节点勾选数量）
+   */
+  public static CHILDREN_TICKED_COUNT = '_childrenTickedCount';
+
+  /**
+   * 行数据被内联编辑前的值
+   */
+  public static ROW_OLD_VALUE = '_rowOldValue';
+
+  /**
+   * 行下标
+   */
+  public static ROW_INDEX = '_rowIndex';
+
+  /**
+   * 懒加载后仍然无数据
+   */
+  public static LAZYLOAD_NO_CHILDREN = '_lazyloadNoChildren';
+
+  /**
+   * 获得行数据中拓展的字段属性名
+   * @param props
+   * @returns
+   */
+  public static getExtraFields(props: object) {
+    return {
+      rowKey: FieldNames.ROW_KEY,
+      ticked: props['tickedField'], // 行数据勾选状态
+      selected: props['selectedField'], // 行数据选中状态
+      expand: FieldNames.EXPAND,
+      tickedCount: FieldNames.TICKED_COUNT,
+      childrenTickedCount: FieldNames.CHILDREN_TICKED_COUNT,
+      rowOldValue: FieldNames.ROW_OLD_VALUE,
+      rowIndex: FieldNames.ROW_INDEX,
+      lazyloadNoChildren: FieldNames.LAZYLOAD_NO_CHILDREN,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/FormStatus.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/FormStatus.ts
new file mode 100644
index 00000000..2b86cdf7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/FormStatus.ts
@@ -0,0 +1,39 @@
+/**
+ * Form表单状态
+ */
+export class FormStatus {
+  /**
+   * 新增
+   */
+  public static ADD = 'add';
+  /**
+   * 编辑
+   */
+  public static EDIT = 'edit';
+  /**
+   * 复制
+   */
+  public static CLONE = 'clone';
+  /**
+   * 新增顶级节点
+   */
+  public static ADD_TOP = 'addTop';
+  /**
+   * 新增子节点
+   */
+  public static ADD_CHILD = 'addChild';
+
+  /**
+   * 获得所有Form表单状态对象
+   * @returns
+   */
+  public static getAll() {
+    return {
+      [FormStatus.ADD]: FormStatus.ADD,
+      [FormStatus.EDIT]: FormStatus.EDIT,
+      [FormStatus.CLONE]: FormStatus.CLONE,
+      [FormStatus.ADD_TOP]: FormStatus.ADD_TOP,
+      [FormStatus.ADD_CHILD]: FormStatus.ADD_CHILD,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/GroupMode.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/GroupMode.ts
new file mode 100644
index 00000000..76e08c7e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/GroupMode.ts
@@ -0,0 +1,24 @@
+/**
+ * 数据分组模式
+ */
+export class GroupMode {
+  /**
+   * 独立行分组
+   */
+  public static ALONE = 'alone';
+  /**
+   * 合并行分组
+   */
+  public static MERGE = 'merge';
+
+  /**
+   * 获得所有数据分组模式对象
+   * @returns
+   */
+  public static getAll() {
+    return {
+      [GroupMode.ALONE]: GroupMode.ALONE,
+      [GroupMode.MERGE]: GroupMode.MERGE,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/GroupStartOpen.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/GroupStartOpen.ts
new file mode 100644
index 00000000..3700c4f1
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/GroupStartOpen.ts
@@ -0,0 +1,29 @@
+/**
+ * 独立分组模式下默认展开的行
+ */
+export class GroupStartOpen {
+  /**
+   * 全部展开
+   */
+  public static ALL = 'all';
+  /**
+   * 第一条
+   */
+  public static FIRST = 'first';
+  /**
+   * 不展开
+   */
+  public static NONE = 'none';
+
+  /**
+   * 获得所有数据分组模式对象
+   * @returns
+   */
+  public static getAll() {
+    return {
+      [GroupStartOpen.ALL]: GroupStartOpen.ALL,
+      [GroupStartOpen.FIRST]: GroupStartOpen.FIRST,
+      [GroupStartOpen.NONE]: GroupStartOpen.NONE,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/SelectMode.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/SelectMode.ts
new file mode 100644
index 00000000..9d465d3b
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/constant/src/SelectMode.ts
@@ -0,0 +1,34 @@
+/**
+ * 选择模式
+ */
+export class SelectMode {
+  /**
+   * 不允许选择
+   */
+  public static NONE = 'none';
+  /**
+   * 单行选择
+   */
+  public static SINGLE_ROW = 'singleRow';
+  /**
+   * 行选择
+   */
+  public static ROW = 'row';
+  /**
+   * 单元格选择
+   */
+  public static CELL = 'cell';
+
+  /**
+   * 获得所有选择模式对象
+   * @returns
+   */
+  public static getAll() {
+    return {
+      [SelectMode.NONE]: SelectMode.NONE,
+      [SelectMode.SINGLE_ROW]: SelectMode.SINGLE_ROW,
+      [SelectMode.ROW]: SelectMode.ROW,
+      [SelectMode.CELL]: SelectMode.CELL,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/EventManager.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/EventManager.ts
new file mode 100644
index 00000000..6833a6bc
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/EventManager.ts
@@ -0,0 +1,175 @@
+import type { PropsType } from '../types/PropsType';
+
+import { RowClick } from './src/RowClick';
+import { RowDbClick } from './src/RowDbClick';
+import { AfterDragAndDrop } from './src/AfterDragAndDrop';
+import { UpdateTicked } from './src/UpdateTicked';
+import { UpdateTickeds } from './src/UpdateTickeds';
+import { BeforeRequestData } from './src/BeforeRequestData';
+import { AfterRequestData } from './src/AfterRequestData';
+import { BeforeEditorDataSubmit } from './src/BeforeEditorDataSubmit';
+import { AfterEditorDataSubmit } from './src/AfterEditorDataSubmit';
+import { BeforeRemove } from './src/BeforeRemove';
+import { AfterRemove } from './src/AfterRemove';
+import { AfterEditorOpen } from './src/AfterEditorOpen';
+import { GridTools } from '../GridTools';
+import { TableType } from '../types/TableType';
+
+/**
+ * w-grid 表格事件管理器
+ */
+export class EventManager {
+  private _rowClick: RowClick;
+  private _rowDbClick: RowDbClick;
+  private _aftetDnd: AfterDragAndDrop;
+  private _updateTicked: UpdateTicked;
+  private _updateTickeds: UpdateTickeds;
+  private _beforeRequestData: BeforeRequestData;
+  private _afterRequestData: AfterRequestData;
+  private _beforeEditorDataSubmit: BeforeEditorDataSubmit;
+  private _afterEditorDataSubmit: AfterEditorDataSubmit;
+  private _beforeRemove: BeforeRemove;
+  private _afterRemove: AfterRemove;
+  private _afterEditorOpen: AfterEditorOpen;
+
+  constructor(props: PropsType, table: TableType) {
+    this._rowClick = new RowClick(props, table);
+    this._rowDbClick = new RowDbClick(props, table);
+    this._aftetDnd = new AfterDragAndDrop(props, table);
+    this._updateTicked = new UpdateTicked(props, table);
+    this._updateTickeds = new UpdateTickeds(props, table);
+    this._beforeRequestData = new BeforeRequestData(props, table);
+    this._afterRequestData = new AfterRequestData(props, table);
+    this._beforeEditorDataSubmit = new BeforeEditorDataSubmit(props, table);
+    this._afterEditorDataSubmit = new AfterEditorDataSubmit(props, table);
+    this._beforeRemove = new BeforeRemove(props, table);
+    this._afterRemove = new AfterRemove(props, table);
+    this._afterEditorOpen = new AfterEditorOpen(props, table);
+  }
+
+  /**
+   * 行点击事件
+   * @param evt html事件对象
+   * @param row 行对象
+   * @param index 行下标
+   */
+  public rowClick(evt: any, row: any, index: number) {
+    this._rowClick.execute(evt, row, index);
+  }
+
+  /**
+   * 行双击事件
+   * @param evt html事件对象
+   * @param row 行对象
+   * @param index 行下标
+   */
+  public rowDbClick(evt: any, row: any, index: number) {
+    this._rowDbClick.execute(evt, row, index);
+  }
+
+  /**
+   * 行拖拽排序后触发事件
+   * @param updateData 排序更改的所有记录
+   */
+  public afterDragAndDrop(updateData: any) {
+    this._aftetDnd.execute(updateData);
+  }
+
+  /**
+   * 行数据checkbox勾选状态改变事件
+   * @param evt html事件对象
+   * @param row 更改勾选状态的行对象
+   */
+  public updateTicked(evt: any, row: any) {
+    this._updateTicked.execute(evt, row);
+  }
+
+  /**
+   * 列头checkbox全部勾选状态改变事件
+   * @param value 更改的状态
+   */
+  public updateTickeds(value: boolean | null) {
+    this._updateTickeds.execute(value);
+  }
+
+  /**
+   * 表格请求数据前触发事件
+   * @param requestParams 请求参数
+   * @returns 被修改过的或原始请求参数
+   */
+  public async beforeRequestData(requestParams: any) {
+    return await this._beforeRequestData.execute(requestParams);
+  }
+
+  /**
+   * 表格请求数据完成后触发事件
+   * @param rows 请求成功数据
+   */
+  public afterRequestData(rows: any) {
+    this._afterRequestData.execute(rows);
+  }
+
+  /**
+   * 内置编辑窗口提交数据前触发事件
+   * @param data 提交数据
+   * @returns {
+   *  data: data, //原始数据或被修改后的数据
+   *  submit: true,//是否提交
+   *  closeDialog: true,//提交成功后是否关闭窗口
+   * }
+   */
+  public beforeEditorDataSubmit(data: any): any {
+    return this._beforeEditorDataSubmit.execute(data);
+  }
+
+  /**
+   * 内置编辑窗口提交数据完成后触发事件
+   * @param data 提交成功数据
+   */
+  public afterEditorDataSubmit(data: any) {
+    this._afterEditorDataSubmit.execute(data);
+  }
+
+  /**
+   * 内置删除功能提交前触发事件
+   * @param ids 提交的id集合
+   * @returns {
+   *  submit: true,//是否提交
+   *  ids: <any> [],//被修改后的id集合
+   * }
+   */
+  public async beforeRemove(ids: any) {
+    return await this._beforeRemove.execute(ids);
+  }
+
+  /**
+   * 内置删除功能提交完成后触发事件
+   * @param ids 提交成功的id集合
+   */
+  public afterRemove(ids: any) {
+    this._afterRemove.execute(ids);
+  }
+
+  /**
+   * 内置编辑窗口打开后触发事件
+   * @param data
+   */
+  public afterEditorOpen(data: any) {
+    this._afterEditorOpen.execute(data);
+  }
+
+  setInstance(instance: any, tools: GridTools) {
+    this._rowClick.setInstance(instance, tools);
+    this._rowDbClick.setInstance(instance, tools);
+    this._aftetDnd.setInstance(instance, tools);
+    this._updateTicked.setInstance(instance, tools);
+    this._updateTickeds.setInstance(instance, tools);
+    this._beforeRequestData.setInstance(instance, tools);
+    this._afterRequestData.setInstance(instance, tools);
+    this._beforeEditorDataSubmit.setInstance(instance, tools);
+    this._afterEditorDataSubmit.setInstance(instance, tools);
+    this._beforeRemove.setInstance(instance, tools);
+    this._afterRemove.setInstance(instance, tools);
+    this._afterEditorOpen.setInstance(instance, tools);
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterDragAndDrop.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterDragAndDrop.ts
new file mode 100644
index 00000000..79fd62fe
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterDragAndDrop.ts
@@ -0,0 +1,18 @@
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 行拖拽排序后触发事件
+ */
+export class AfterDragAndDrop extends Base {
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+  }
+
+  static NAME = 'afterDragAndDrop';
+
+  public execute(updateData: any) {
+    this.instance.emit(AfterDragAndDrop.NAME, { grid: this.instance, data: updateData });
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterEditorDataSubmit.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterEditorDataSubmit.ts
new file mode 100644
index 00000000..34090b1d
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterEditorDataSubmit.ts
@@ -0,0 +1,18 @@
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 内置编辑窗口数据提交完成后触发事件
+ */
+export class AfterEditorDataSubmit extends Base {
+  static NAME = 'afterEditorDataSubmit';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+  }
+
+  public execute(data: any) {
+    this.instance.emit(AfterEditorDataSubmit.NAME, { grid: this.instance, data });
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterEditorOpen.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterEditorOpen.ts
new file mode 100644
index 00000000..3342ba92
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterEditorOpen.ts
@@ -0,0 +1,18 @@
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 内置编辑窗口打开之后触发事件
+ */
+export class AfterEditorOpen extends Base {
+  static NAME = 'afterEditorOpen';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+  }
+
+  public execute(data: any) {
+    this.instance.emit(AfterEditorOpen.NAME, { grid: this.instance, data });
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterRemove.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterRemove.ts
new file mode 100644
index 00000000..2bb6b3d1
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterRemove.ts
@@ -0,0 +1,18 @@
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 内置删除功能提交完成后触发事件
+ */
+export class AfterRemove extends Base {
+  static NAME = 'afterRemove';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+  }
+
+  public execute(ids: any) {
+    this.instance.emit(AfterRemove.NAME, { grid: this.instance, ids });
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterRequestData.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterRequestData.ts
new file mode 100644
index 00000000..ada5dbfc
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/AfterRequestData.ts
@@ -0,0 +1,18 @@
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 数据请求完成后触发事件
+ */
+export class AfterRequestData extends Base {
+  static NAME = 'afterRequestData';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+  }
+
+  public execute(rows: any) {
+    this.instance.emit(AfterRequestData.NAME, { grid: this.instance, rows });
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeEditorDataSubmit.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeEditorDataSubmit.ts
new file mode 100644
index 00000000..769ecb9c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeEditorDataSubmit.ts
@@ -0,0 +1,35 @@
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 内置编辑窗口数据提交前触发事件
+ */
+export class BeforeEditorDataSubmit extends Base {
+  static NAME = 'beforeEditorDataSubmit';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+  }
+
+  public execute(data: any): any {
+    const result = {
+      data: data,
+      submit: true,
+      closeDialog: true,
+    };
+    this.instance.emit(BeforeEditorDataSubmit.NAME, {
+      grid: this.instance,
+      data: data,
+      callback: (_data: any, closeFlag: boolean = true) => {
+        if (typeof _data === 'boolean' && _data === false) {
+          result.submit = false;
+        } else {
+          result.data = _data;
+        }
+        result.closeDialog = closeFlag;
+      },
+    });
+    return result;
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeRemove.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeRemove.ts
new file mode 100644
index 00000000..c13992af
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeRemove.ts
@@ -0,0 +1,33 @@
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 内置删除功能提交前触发事件
+ */
+export class BeforeRemove extends Base {
+  static NAME = 'beforeRemove';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+  }
+
+  public async execute(ids: any) {
+    const result = {
+      submit: true,
+      ids: <any>[],
+    };
+    await this.instance.emit(BeforeRemove.NAME, {
+      grid: this.instance,
+      ids: ids,
+      callback: (_ids: any) => {
+        if (_ids && Array.isArray(_ids)) {
+          result.ids.push(..._ids);
+        } else {
+          result.submit = false;
+        }
+      },
+    });
+    return result;
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeRequestData.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeRequestData.ts
new file mode 100644
index 00000000..85306e90
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/BeforeRequestData.ts
@@ -0,0 +1,25 @@
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+/**
+ * w-grid 表格请求数据前事件
+ */
+export class BeforeRequestData extends Base {
+  static NAME = 'beforeRequestData';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+  }
+
+  public async execute(requestParams: any) {
+    let result = undefined;
+    await this.instance.emit(BeforeRequestData.NAME, {
+      grid: this.instance,
+      data: requestParams,
+      callback: (_requestParams: URLSearchParams | any) => {
+        result = _requestParams;
+      },
+    });
+    return result;
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowClick.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowClick.ts
new file mode 100644
index 00000000..5a75663d
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowClick.ts
@@ -0,0 +1,61 @@
+import { Base } from '../../Base';
+import { Constant } from '../../constant/Constant';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 行单击事件
+ */
+export class RowClick extends Base {
+  static NAME = 'rowClick';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+    this.handleRowClick = this.handleRowClick.bind(this);
+    this.processRowSelection = this.processRowSelection.bind(this);
+    this.clickExitInlineEdit = this.clickExitInlineEdit.bind(this);
+    this.execClick = this.execClick.bind(this);
+  }
+
+  public execute(evt: any, row: any, index: number) {
+    if (!row) {
+      return;
+    }
+    const selected = this.instance.getSelectedRow();
+    this.handleRowClick(evt, row, index, selected);
+  }
+  private handleRowClick(evt: any, row: any, index: number, selected: any) {
+    if (this.clickExitInlineEdit(row, selected)) {
+      this.tools?.editFM.exitInlineEdit();
+      return;
+    }
+    if (this.execClick()) {
+      this.processRowSelection(evt, row, index);
+    }
+  }
+  private processRowSelection(evt: any, row: any, index: number) {
+    if (!evt.ctrlKey) {
+      this.instance.clearSelected();
+      if (!this.props.tree) {
+        this.instance.clearTicked();
+      }
+    }
+    row[this.props.selectedField] = true;
+    if (!this.props.tree) {
+      row[this.props.tickedField] = true;
+      this.tools?.opFM.resetHeaderCheckbox();
+    }
+    this.instance.emit(RowClick.NAME, { grid: this.instance, evt, row, index });
+  }
+  private clickExitInlineEdit(row: any, selected: any) {
+    return (
+      this.props.localMode &&
+      this.table?.store.inlineEditStatus !== Constant.EDIT_STATUS.NONE &&
+      this.props.selectMode === Constant.SELECT_MODE.ROW &&
+      row[Constant.FIELD_NAMES.ROW_KEY] !== selected[Constant.FIELD_NAMES.ROW_KEY]
+    );
+  }
+  private execClick() {
+    return this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.NONE && this.props.selectMode !== Constant.SELECT_MODE.NONE;
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowDbClick.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowDbClick.ts
new file mode 100644
index 00000000..d7d20b44
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/RowDbClick.ts
@@ -0,0 +1,27 @@
+import { Constant } from '../../constant/Constant';
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 行双击事件
+ */
+export class RowDbClick extends Base {
+  static NAME = 'rowDbClick';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+  }
+
+  public execute(evt: any, row: any, index: number) {
+    if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.NONE && this.props.selectMode !== Constant.SELECT_MODE.NONE) {
+      if (this.props.onRowDbClick) {
+        this.instance.emit(RowDbClick.NAME, { grid: this.instance, evt, row, index });
+      } else if (this.props.dbClickOperation === 'view') {
+        this.tools?.apiFM.operator.viewData();
+      } else if (this.props.dbClickOperation !== 'none') {
+        this.table.componentRef.getTopRef()?.dbClickOperation(row);
+      }
+    }
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/UpdateTicked.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/UpdateTicked.ts
new file mode 100644
index 00000000..854a9434
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/UpdateTicked.ts
@@ -0,0 +1,33 @@
+import { Constant } from '../../constant/Constant';
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 行数据checkbox勾选状态改变事件
+ */
+export class UpdateTicked extends Base {
+  static NAME = 'updateTicked';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+  }
+
+  public execute(evt: Event, row: any) {
+    const selectedField = this.props.selectedField;
+    const tickedField = this.props.tickedField;
+    if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.NONE) {
+      row[selectedField] = row[tickedField];
+      this.tools?.opFM.resetHeaderCheckbox();
+      if (!row[tickedField]) {
+        // 取消选中时将选中的单元格也清空
+        this.table.store.cellSelected = {};
+      }
+      if (this.props.onUpdateTicked) {
+        this.instance.emit(UpdateTicked.NAME, { grid: this.instance, evt, row });
+      }
+    } else {
+      row[tickedField] = !row[tickedField];
+    }
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/UpdateTickeds.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/UpdateTickeds.ts
new file mode 100644
index 00000000..c18e350e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/event/src/UpdateTickeds.ts
@@ -0,0 +1,38 @@
+import { Constant } from '../../constant/Constant';
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 列头全部勾选checkbox状态改变事件
+ */
+export class UpdateTickeds extends Base {
+  static NAME = 'updateTickeds';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.execute = this.execute.bind(this);
+  }
+
+  public execute(value: boolean | null) {
+    const selectedField = this.props.selectedField;
+    const tickedField = this.props.tickedField;
+    if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.NONE) {
+      if (value) {
+        this.table.rows.forEach((item) => {
+          item[tickedField] = true;
+          item[selectedField] = true;
+        });
+      } else {
+        this.table.rows.forEach((item) => {
+          item[tickedField] = false;
+          item[selectedField] = false;
+        });
+      }
+    } else if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.ROW || this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.CELL) {
+      this.table.store.headerTicked = null;
+    } else if (this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS) {
+      this.table.store.headerTicked = false;
+    }
+    this.instance.emit(UpdateTickeds.NAME, { grid: this.instance, value: value });
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/ExposeApiManager.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/ExposeApiManager.ts
new file mode 100644
index 00000000..01e91c3d
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/ExposeApiManager.ts
@@ -0,0 +1,134 @@
+import { PropsType } from '../types/PropsType';
+
+import { GridTools } from '../GridTools';
+import { Button } from './src/Button';
+import { ComponentRef } from './src/ComponentRef';
+import { GetData } from './src/GetData';
+import { LocalMode } from './src/LocalMode';
+import { Operator } from './src/Operator';
+import { ResetProperty } from './src/ResetProperty';
+import { TableType } from '../types/TableType';
+
+/**
+ * w-grid 对外暴露API管理器
+ */
+export class ExposeApiManager {
+  /**
+   * 获取表格数据相关的API
+   */
+  getData: GetData;
+  /**
+   * 获取内置组件ref相关的API
+   */
+  componentRef: ComponentRef;
+  /**
+   * 表格操作相关的API
+   */
+  operator: Operator;
+  /**
+   * 本地模式API
+   */
+  localMode: LocalMode;
+  /**
+   * 重新设置表格属性API
+   */
+  resetProperty: ResetProperty;
+  /**
+   * 内置按钮API
+   */
+  button: Button;
+
+  constructor(props: PropsType, table: TableType) {
+    this.getData = new GetData(props, table);
+    this.componentRef = new ComponentRef(props, table);
+    this.operator = new Operator(props, table);
+    this.localMode = new LocalMode(props, table);
+    this.resetProperty = new ResetProperty(props, table);
+    this.button = new Button(props, table);
+  }
+
+  /**
+   * 创建暴露给用户使用的API
+   * @param tools
+   * @returns
+   */
+  static createExpose(tools: GridTools) {
+    return {
+      // 获取数据api
+      getRows: tools.apiFM.getData.getRows,
+      getSelectedRow: tools.apiFM.getData.getSelectedRow,
+      getSelectedRows: tools.apiFM.getData.getSelectedRows,
+      getTickedRow: tools.apiFM.getData.getTickedRow,
+      getTickedRows: tools.apiFM.getData.getTickedRows,
+      getCascadeChildren: tools.apiFM.getData.getCascadeChildren,
+      getCascadeParents: tools.apiFM.getData.getCascadeParents,
+      getSelectedCell: tools.apiFM.getData.getSelectedCell,
+
+      // 获取子组件ref的api
+      getQueryForm: tools.apiFM.componentRef.getQueryForm,
+      getEditorDialog: tools.apiFM.componentRef.getEditorDialog,
+      getCellEditorDialog: tools.apiFM.componentRef.getCellEditorDialog,
+      getEditorForm: tools.apiFM.componentRef.getEditorForm,
+      getCellEditorForm: tools.apiFM.componentRef.getCellEditorForm,
+      getViewerDrawer: tools.apiFM.componentRef.getViewerDrawer,
+      getViewerPanel: tools.apiFM.componentRef.getViewerPanel,
+
+      // 表格操作api
+      setSelected: tools.apiFM.operator.setSelected,
+      setTicked: tools.apiFM.operator.setTicked,
+      clearSelected: tools.apiFM.operator.clearSelected,
+      clearTicked: tools.apiFM.operator.clearTicked,
+      expand: tools.apiFM.operator.expand,
+      collapse: tools.apiFM.operator.collapse,
+
+      // 本地模式api
+      setLocalData: tools.apiFM.localMode.setLocalData,
+      addLocalData: tools.apiFM.localMode.addLocalData,
+      updateLocalData: tools.apiFM.localMode.updateLocalData,
+      removeLocalData: tools.apiFM.localMode.removeLocalData,
+
+      // 重新设置或覆盖现有表格属性配置api
+      setQueryCriteria: tools.apiFM.resetProperty.setQueryCriteria,
+      setQueryCriteriaFieldValue: tools.apiFM.resetProperty.setQueryCriteriaFieldValue,
+      setDataUrl: tools.apiFM.resetProperty.setDataUrl,
+      setFetchDataUrl: tools.apiFM.resetProperty.setFetchDataUrl,
+      setAddDataUrl: tools.apiFM.resetProperty.setAddDataUrl,
+      setEditDataUrl: tools.apiFM.resetProperty.setEditDataUrl,
+      setRemoveDataUrl: tools.apiFM.resetProperty.setRemoveDataUrl,
+
+      // 内置按钮api
+      query: tools.apiFM.button.query,
+      moreQuery: tools.apiFM.button.moreQuery,
+      reset: tools.apiFM.button.reset,
+      refresh: tools.apiFM.button.refresh,
+      add: tools.apiFM.button.add,
+      addTop: tools.apiFM.button.addTop,
+      addChild: tools.apiFM.button.addChild,
+      edit: tools.apiFM.button.edit,
+      cellEdit: tools.apiFM.button.cellEdit,
+      inlineCellEdit: tools.apiFM.button.inlineCellEdit,
+      inlineRowEdit: tools.apiFM.button.inlineRowEdit,
+      inlineRowsEdit: tools.apiFM.button.inlineRowsEdit,
+      clone: tools.apiFM.button.clone,
+      remove: tools.apiFM.button.remove,
+      view: tools.apiFM.button.view,
+      export: tools.apiFM.button.exportData,
+      resetDefaultValues: tools.apiFM.button.resetDefaultValues,
+
+      // =========其他API=========
+      refreshStyle: tools.opFM.resetStyleVariableValue,
+      getHtmlElement: () => {
+        return tools.table.componentRef.getTableRef()?.$el;
+      },
+    };
+  }
+
+  // 设置组件实例
+  setInstance(instance: any, tools: GridTools) {
+    this.getData.setInstance(instance, tools);
+    this.componentRef.setInstance(instance, tools);
+    this.operator.setInstance(instance, tools);
+    this.localMode.setInstance(instance, tools);
+    this.resetProperty.setInstance(instance, tools);
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/Button.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/Button.ts
new file mode 100644
index 00000000..807845a0
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/Button.ts
@@ -0,0 +1,133 @@
+import { Tools } from '@/platform';
+import { toRaw } from 'vue';
+import { Base } from '../../Base';
+import { Constant, PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 内置按钮API
+ */
+export class Button extends Base {
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.getTopRef = this.getTopRef.bind(this);
+    this.getActionArgs = this.getActionArgs.bind(this);
+    this.query = this.query.bind(this);
+    this.moreQuery = this.moreQuery.bind(this);
+    this.reset = this.reset.bind(this);
+    this.refresh = this.refresh.bind(this);
+    this.add = this.add.bind(this);
+    this.addTop = this.addTop.bind(this);
+    this.addChild = this.addChild.bind(this);
+    this.edit = this.edit.bind(this);
+    this.cellEdit = this.cellEdit.bind(this);
+    this.inlineCellEdit = this.inlineCellEdit.bind(this);
+    this.inlineRowEdit = this.inlineRowEdit.bind(this);
+    this.inlineRowsEdit = this.inlineRowsEdit.bind(this);
+    this.clone = this.clone.bind(this);
+    this.remove = this.remove.bind(this);
+    this.view = this.view.bind(this);
+    this.exportData = this.exportData.bind(this);
+    this.resetDefaultValues = this.resetDefaultValues.bind(this);
+    this.beforeCellEdit = this.beforeCellEdit.bind(this);
+  }
+
+  private getTopRef() {
+    return this.table.componentRef.getTopRef();
+  }
+  private getActionArgs() {
+    return this.tools?.cm.actionArgs.value;
+  }
+
+  query() {
+    this.tools?.bm.query.click(this.getActionArgs());
+  }
+  moreQuery() {
+    this.tools?.bm.moreQuery.click(this.getActionArgs());
+  }
+  reset() {
+    this.tools?.bm.reset.click(this.getActionArgs());
+  }
+  refresh() {
+    this.tools?.bm.refresh.click(this.getActionArgs());
+  }
+  add() {
+    this.tools?.bm.add.click(this.getActionArgs());
+  }
+  addTop() {
+    this.tools?.bm.addTop.click(this.getActionArgs());
+  }
+  addChild(target: any) {
+    if (Tools.isEmpty(target)) {
+      throw new Error('[w-grid] The `addChild` method parameter cannot be null.');
+    }
+    this.tools?.apiFM.operator.setSelected(target);
+    this.tools?.bm.addChild.click(this.getActionArgs());
+  }
+  edit(target: any) {
+    if (Tools.isEmpty(target)) {
+      throw new Error('[w-grid] The `edit` method parameter cannot be null.');
+    }
+    this.tools?.apiFM.operator.setSelected(target);
+    this.tools?.bm.edit.click(this.getActionArgs());
+  }
+  cellEdit(targetRow: any, targetColName: string) {
+    this.beforeCellEdit(targetRow, targetColName);
+    this.tools?.bm.cellEdit.click(this.getActionArgs());
+  }
+  inlineCellEdit(targetRow: any, targetColName: string) {
+    this.beforeCellEdit(targetRow, targetColName);
+    this.tools?.bm.inlineCellEdit.click(this.getActionArgs());
+  }
+  inlineRowEdit(target: any) {
+    this.tools?.apiFM.operator.setSelected(target);
+    this.tools?.bm.inlineRowEdit.click(this.getActionArgs());
+  }
+  inlineRowsEdit() {
+    this.tools?.bm.inlineRowsEdit.click(this.getActionArgs());
+  }
+  clone(target: any) {
+    this.tools?.apiFM.operator.setSelected(target);
+    this.tools?.bm.clone.click(this.getActionArgs());
+  }
+  remove(target: any) {
+    this.tools?.apiFM.operator.setSelected(target);
+    this.getTopRef()?.remove(this.getActionArgs());
+  }
+  view(target: any) {
+    this.tools?.apiFM.operator.setSelected(target);
+    this.tools?.bm.view.click(this.getActionArgs());
+  }
+  exportData() {
+    this.tools?.bm.expand.click(this.getActionArgs());
+  }
+  resetDefaultValues() {
+    this.tools?.bm.resetDefaultValues.click(this.getActionArgs());
+  }
+
+  private beforeCellEdit(targetRow: any, targetColName: string) {
+    if (!this.table) {
+      return;
+    }
+    if (Tools.isEmpty(targetRow)) {
+      throw new Error('[w-grid] The `targetRow` parameter of the `cellEdit` method cannot be null.');
+    }
+    if (Tools.isEmpty(targetColName)) {
+      throw new Error('[w-grid] The `targetColName` parameter of the `cellEdit` method cannot be null.');
+    }
+    const result = this.tools?.dataFM.getRowsByTarget(this.table.rows, targetRow);
+    if (!result || result.length === 0) {
+      throw new Error('[w-grid] The `targetRow` does not exist in the table data.');
+    }
+    const row = result[0];
+    if (!row[targetColName]) {
+      throw new Error('[w-grid] The `targetColName` does not exist in the table data.');
+    }
+    this.table.store.cellSelected = {
+      row: toRaw(row),
+      rowKey: row[Constant.FIELD_NAMES.ROW_KEY],
+      primaryKey: row[this.props.primaryKey],
+      colName: targetColName,
+      value: row[targetColName],
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/ComponentRef.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/ComponentRef.ts
new file mode 100644
index 00000000..760ab7f5
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/ComponentRef.ts
@@ -0,0 +1,40 @@
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 获取内置组件ref对象API
+ */
+export class ComponentRef extends Base {
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.getQueryForm = this.getQueryForm.bind(this);
+    this.getEditorDialog = this.getEditorDialog.bind(this);
+    this.getCellEditorDialog = this.getCellEditorDialog.bind(this);
+    this.getEditorForm = this.getEditorForm.bind(this);
+    this.getCellEditorForm = this.getCellEditorForm.bind(this);
+    this.getViewerDrawer = this.getViewerDrawer.bind(this);
+    this.getViewerPanel = this.getViewerPanel.bind(this);
+  }
+
+  getQueryForm() {
+    return this.table.componentRef.getTopRef().getQueryForm();
+  }
+  getEditorDialog() {
+    return this.table.componentRef.getEditorRef()?.getDialog();
+  }
+  getCellEditorDialog() {
+    return this.table.componentRef.getCellEditorRef()?.getDialog();
+  }
+  getEditorForm() {
+    return this.table.componentRef.getEditorRef()?.getForm();
+  }
+  getCellEditorForm() {
+    return this.table.componentRef.getCellEditorRef()?.getForm();
+  }
+  getViewerDrawer() {
+    return this.table.componentRef.getViewRef()?.getViewerDrawer();
+  }
+  getViewerPanel() {
+    return this.table.componentRef.getViewRef()?.getInfoPanel();
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/GetData.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/GetData.ts
new file mode 100644
index 00000000..e71651be
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/GetData.ts
@@ -0,0 +1,182 @@
+import { toRaw } from 'vue';
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 获取表格数据相关API
+ */
+export class GetData extends Base {
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.getRows = this.getRows.bind(this);
+    this.getSelectedRow = this.getSelectedRow.bind(this);
+    this.getSelectedRows = this.getSelectedRows.bind(this);
+    this.getTickedRow = this.getTickedRow.bind(this);
+    this.getTickedRows = this.getTickedRows.bind(this);
+    this.getSelectedCell = this.getSelectedCell.bind(this);
+    this.getCascadeChildren = this.getCascadeChildren.bind(this);
+    this.getCascadeParents = this.getCascadeParents.bind(this);
+    this.getSelectRowsByFieldName = this.getSelectRowsByFieldName.bind(this);
+    this.getCascadeChildrenData = this.getCascadeChildrenData.bind(this);
+    this.getCascadeParentsData = this.getCascadeParentsData.bind(this);
+  }
+
+  /**
+   * 获取表格所有数据
+   */
+  getRows() {
+    return toRaw(this.table?.rows);
+  }
+
+  /**
+   * 获取单条选中记录
+   * @return 行数据对象
+   */
+  getSelectedRow() {
+    const selectedRows = [];
+    if (!this.table) {
+      return selectedRows;
+    }
+    this.getSelectRowsByFieldName(this.table.rows, selectedRows, this.props.selectedField);
+    if (selectedRows && selectedRows.length > 0) {
+      return toRaw(selectedRows)[0];
+    } else {
+      return undefined;
+    }
+  }
+
+  /**
+   * 获取所有选中记录
+   * @return 行数据对象数组
+   */
+  getSelectedRows() {
+    const selectedRows = [];
+    if (!this.table) {
+      return selectedRows;
+    }
+    this.getSelectRowsByFieldName(this.table.rows, selectedRows, this.props.selectedField);
+    return toRaw(selectedRows);
+  }
+
+  /**
+   * 获得单条checkbox勾选的记录
+   * @param containsNullStatus 是否包含半勾选状态的记录
+   * @return 行数据对象
+   */
+  getTickedRow = (containsNullStatus: boolean = false) => {
+    const tickedRows = [];
+    if (!this.table) {
+      return tickedRows;
+    }
+    this.getSelectRowsByFieldName(this.table.rows, tickedRows, this.props.tickedField, containsNullStatus);
+    if (tickedRows && tickedRows.length > 0) {
+      return toRaw(tickedRows)[0];
+    } else {
+      return undefined;
+    }
+  };
+
+  /**
+   * 获得checkbox勾选的所有记录
+   * @param containsNullStatus 是否包含半勾选状态的记录
+   * return 数组
+   */
+  getTickedRows(containsNullStatus: boolean = false) {
+    const tickedRows = [];
+    if (!this.table) {
+      return tickedRows;
+    }
+    this.getSelectRowsByFieldName(this.table.rows, tickedRows, this.props.tickedField, containsNullStatus);
+    return toRaw(tickedRows);
+  }
+
+  /**
+   * 获得选中的单元格
+   */
+  getSelectedCell() {
+    return {
+      row: this.table.store.cellSelected?.row,
+      colName: this.table.store.cellSelected?.colName,
+      value: this.table.store.cellSelected?.value,
+    };
+  }
+
+  /**
+   * 获取选择的行记录及所有子记录
+   * @param fieldName 属性名称
+   * @return 若传入了属性名称，则返回属性对应的数据数组
+   *         若没有传入属性名称，返回行数据对象数组
+   */
+  getCascadeChildren(fieldName: string) {
+    const row = this.getSelectedRow();
+    const rows = row ? [row] : [];
+    return this.getCascadeChildrenData(rows, fieldName);
+  }
+
+  /**
+   * 获取选中的行记录及所有父记录
+   * @param fieldName 属性名称
+   * @return 若传入了属性名称，则返回属性对应的数据数组
+   *         若没有传入属性名称，返回行数据对象数组
+   */
+  getCascadeParents(fieldName: string) {
+    const row = this.getSelectedRow();
+    if (row) {
+      const parent = this.getCascadeParentsData(row, fieldName);
+      const result = <any>[fieldName ? row[fieldName] : row];
+      if (parent && parent.length > 0) {
+        result.push(...parent);
+      }
+      return result;
+    }
+    return undefined;
+  }
+
+  private getSelectRowsByFieldName(arr: Array<any>, selectedRows: Array<any>, fieldName: string, containsNullStatus: boolean = false) {
+    arr.forEach((item) => {
+      if (containsNullStatus && (item[fieldName] || item[fieldName] === null)) {
+        selectedRows.push(item);
+      } else if (item[fieldName]) {
+        selectedRows.push(item);
+      }
+      if (this.props.tree && item.children && item.children.length > 0) {
+        this.getSelectRowsByFieldName(item.children, selectedRows, fieldName);
+      }
+    });
+  }
+
+  private getCascadeChildrenData(rows: Array<any>, fieldName: string) {
+    const data = <any>[];
+    if (rows && rows.length > 0) {
+      rows.forEach((item: any, index) => {
+        data.push(fieldName ? item[fieldName] : item);
+        if (this.props.tree && item.children && item.children.length > 0) {
+          const childrenData = this.getCascadeChildrenData(item.children, fieldName);
+          data.push(...childrenData);
+        }
+      });
+    }
+    return data;
+  }
+
+  /**
+   * 获得所有父节点数据
+   * @param row 行数据对象
+   * @param fieldName 字段名称，为空时返回父节点对象，否则返回字段值
+   * @returns
+   */
+  public getCascadeParentsData(row: any, fieldName: string | null | undefined) {
+    const data = <any>[];
+    if (row && row[this.props.foreignKey]) {
+      const parent = this.tools?.dataFM.getRow(this.table.rows, row[this.props.foreignKey], true);
+      if (parent) {
+        data.push(fieldName ? parent[fieldName] : parent);
+        if (parent[this.props.foreignKey]) {
+          const parentData = this.getCascadeParentsData(parent, fieldName);
+          data.push(...parentData);
+        }
+      }
+    }
+    return data;
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/LocalMode.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/LocalMode.ts
new file mode 100644
index 00000000..eb228b6c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/LocalMode.ts
@@ -0,0 +1,209 @@
+import { Tools, TreeBuilder } from '@/platform';
+import { Base } from '../../Base';
+import { Constant, PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 表格本地模式API
+ */
+export class LocalMode extends Base {
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.setLocalData = this.setLocalData.bind(this);
+    this.addLocalData = this.addLocalData.bind(this);
+    this.updateLocalData = this.updateLocalData.bind(this);
+    this.removeLocalData = this.removeLocalData.bind(this);
+
+    this.treeAddLocalData = this.treeAddLocalData.bind(this);
+    this.updateLocalDataError = this.updateLocalDataError.bind(this);
+    this.replaceRowHandler = this.replaceRowHandler.bind(this);
+    this.removeTreeRows = this.removeTreeRows.bind(this);
+  }
+
+  /**
+   * 设置本地记录
+   * @param rows 行数据对象数组
+   * @return 无返回
+   */
+  setLocalData(rows: Array<any>) {
+    if (rows && Array.isArray(rows)) {
+      if (this.props.tree && this.props.treeRelationship === 'parent') {
+        const treeRows = TreeBuilder.build(rows, this.props.foreignKey, this.props.primaryKey);
+        this.table.rows = treeRows;
+      } else {
+        this.table.rows = rows;
+      }
+      this.tools?.dataFM.setExtraProperty(this.table.rows, undefined, true);
+      this.table.store.pagination.rowsNumber = this.table.rows.length;
+      this.tools?.opFM.resetStyleVariableValue();
+    }
+  }
+
+  /**
+   * 新增本地记录
+   * @param data 行数据对象或行数据对象数组
+   * @param index 增加的下标，可不传，默认增加到最后
+   * @return 无返回
+   */
+  addLocalData(data: any, index?: number) {
+    let success = false;
+    if (this.props.tree) {
+      success = this.treeAddLocalData(data);
+    } else {
+      if (data && Array.isArray(data) && data.length > 0) {
+        data.forEach((row) => {
+          if (!index || index >= this.table.rows.length) {
+            this.table.rows.push(row);
+          } else {
+            this.table.rows.splice(index, 0, row);
+          }
+        });
+        success = true;
+      } else if (data) {
+        if (!index || index >= this.table.rows.length) {
+          this.table.rows.push(data);
+        } else {
+          this.table.rows.splice(index, 0, data);
+        }
+        success = true;
+      }
+    }
+    if (success) {
+      this.tools?.dataFM.setExtraProperty(this.table.rows);
+      this.table.store.pagination.rowsNumber = this.table.rows.length;
+      this.tools?.opFM.resetStyleVariableValue();
+    }
+  }
+
+  /**
+   * 修改本地记录
+   * @param data 行数据对象或行数据对象数组
+   * @param fieldName 默认根据数据行主键或者前端行主键进行修改，若传入列名称则根据传入的列名称进行匹配修改。
+   * @return 无返回
+   */
+  updateLocalData(data: any, fieldName: string = '') {
+    if (data && Array.isArray(data)) {
+      data.forEach((item) => {
+        this.updateLocalDataError(fieldName, item);
+        this.replaceRowHandler(this.table.rows, item, fieldName);
+      });
+    } else if (data) {
+      this.updateLocalDataError(fieldName, data);
+      this.replaceRowHandler(this.table.rows, data, fieldName);
+    }
+  }
+
+  /**
+   * 删除本地数据 TODO: 待优化
+   * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组
+   * @return 无返回
+   */
+  removeLocalData(target) {
+    const result = this.tools?.dataFM.getRowsByTarget(this.table.rows, target);
+    if (result && result.length > 0) {
+      if (this.props.tree) {
+        result.forEach((item) => {
+          this.removeTreeRows(this.table.rows, item);
+        });
+        this.tools?.dataFM.setExtraProperty(this.table.rows);
+      } else {
+        result.forEach((item) => {
+          this.table.rows.splice(
+            this.table.rows.findIndex((v) => {
+              if (!Tools.isEmpty(v[this.props.primaryKey]) && Tools.isEmpty(item[this.props.primaryKey])) {
+                return v[this.props.primaryKey] === item[this.props.primaryKey];
+              } else {
+                return v[Constant.FIELD_NAMES.ROW_KEY] === item[Constant.FIELD_NAMES.ROW_KEY];
+              }
+            }),
+            1,
+          );
+        });
+        this.table.store.pagination.rowsNumber = this.table.rows.length;
+      }
+      this.tools?.opFM.resetHeaderCheckbox();
+      this.tools?.opFM.resetStyleVariableValue();
+    }
+  }
+
+  /**
+   * 树表格新增
+   * @param data
+   */
+  private treeAddLocalData(data: any) {
+    let success = false;
+    if (data && Array.isArray(data) && data.length > 0) {
+      data.forEach((row) => {
+        const foreignKey = row[this.props.foreignKey];
+        if (foreignKey) {
+          const parent = this.tools?.dataFM.getRow(this.table.rows, foreignKey, false, this.props.primaryKey);
+          if (parent) {
+            if (parent.children) {
+              parent.children.push(row);
+            } else {
+              parent.children = [row];
+            }
+          } else {
+            this.table.rows.push(row);
+          }
+        } else {
+          this.table.rows.push(row);
+        }
+      });
+      success = true;
+    } else if (data) {
+      const foreignKey = data[this.props.foreignKey];
+      if (foreignKey) {
+        const parent = this.tools?.dataFM.getRow(this.table.rows, foreignKey, false, this.props.primaryKey);
+        if (parent) {
+          if (parent.children) {
+            parent.children.push(data);
+          } else {
+            parent.children = [data];
+          }
+        } else {
+          this.table.rows.push(data);
+        }
+      } else {
+        this.table.rows.push(data);
+      }
+      success = true;
+    }
+    return success;
+  }
+
+  private updateLocalDataError(fieldName: string, data: any) {
+    if (Tools.isEmpty(fieldName) && Tools.isEmpty(data[this.props.primaryKey]) && Tools.isEmpty(data[Constant.FIELD_NAMES.ROW_KEY])) {
+      throw new Error('[w-grid]Data does not contain `primaryKey` or `rowKey`.');
+    }
+  }
+
+  private replaceRowHandler(arr: Array<any>, row: any, fieldName: string) {
+    for (let i = 0; i < arr.length; i++) {
+      if (!Tools.isEmpty(fieldName) && row[fieldName] === arr[i][fieldName]) {
+        // 根据设定的字段进行匹配
+        arr[i] = { ...arr[i], ...row };
+        break;
+      } else if (Tools.isEmpty(fieldName) && !Tools.isEmpty(row[this.props.primaryKey]) && row[this.props.primaryKey] === arr[i][this.props.primaryKey]) {
+        // 未设定根据哪个字段匹配时首先尝试用主键进行匹配。
+        arr[i] = { ...arr[i], ...row };
+        break;
+      } else if (Tools.isEmpty(fieldName) && row[Constant.FIELD_NAMES.ROW_KEY] === arr[i][Constant.FIELD_NAMES.ROW_KEY]) {
+        // 主键匹配失败则尝试用前端唯一键进行匹配
+        arr[i] = { ...arr[i], ...row };
+        break;
+      } else if (this.props.tree && arr[i].children && arr[i].children.length > 0) {
+        this.replaceRowHandler(arr[i].children, row, fieldName);
+      }
+    }
+  }
+
+  private removeTreeRows(arr: Array<any>, row: any) {
+    arr.forEach((item, index) => {
+      if (row[this.props.primaryKey] === item[this.props.primaryKey] || row[Constant.FIELD_NAMES.ROW_KEY] === item[Constant.FIELD_NAMES.ROW_KEY]) {
+        arr.splice(index, 1);
+      } else if (item.children && item.children.length > 0) {
+        this.removeTreeRows(item.children, row);
+      }
+    });
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/Operator.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/Operator.ts
new file mode 100644
index 00000000..74d4c9ba
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/Operator.ts
@@ -0,0 +1,183 @@
+import { nextTick } from 'vue';
+import { Base } from '../../Base';
+import { Constant, PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 表格操作相关API
+ */
+export class Operator extends Base {
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.refreshGrid = this.refreshGrid.bind(this);
+    this.viewData = this.viewData.bind(this);
+    this.setSelected = this.setSelected.bind(this);
+    this.setTicked = this.setTicked.bind(this);
+    this.clearSelected = this.clearSelected.bind(this);
+    this.clearTicked = this.clearTicked.bind(this);
+    this.expand = this.expand.bind(this);
+    this.collapse = this.collapse.bind(this);
+
+    this.processTree = this.processTree.bind(this);
+    this.processGroup = this.processGroup.bind(this);
+    this.setSelectedStatus = this.setSelectedStatus.bind(this);
+    this.setTickedStatus = this.setTickedStatus.bind(this);
+  }
+
+  /**
+   * 刷新表格
+   */
+  refreshGrid() {
+    nextTick(() => {
+      this.tools?.reqApiFM.fetchData({ pagination: this.table.store.pagination });
+      this.table.store.headerTicked = false;
+    });
+  }
+
+  /**
+   * 数据查看
+   */
+  viewData() {
+    this.table.componentRef.getViewRef()?.view();
+  }
+
+  /**
+   * 设置目标行选中
+   * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组。
+   * @return 无返回
+   */
+  setSelected(target: any) {
+    if (target) {
+      const result = this.tools?.dataFM.getRowsByTarget(this.table.rows, target);
+      if (result && result.length > 0) {
+        this.setSelectedStatus(result, true);
+      }
+    }
+  }
+
+  /**
+   * 设置目标行checkbox勾选
+   * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组。
+   * @return 无返回
+   */
+  setTicked(target: any) {
+    if (target) {
+      const result = this.tools?.dataFM.getRowsByTarget(this.table.rows, target);
+      if (result && result.length > 0) {
+        this.setTickedStatus(result, true);
+      }
+    }
+  }
+
+  /**
+   * 清空目标行选中
+   * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组，不传或者为空则清空全部选中状态
+   * @return 无返回
+   */
+  clearSelected(target: any = undefined) {
+    if (target || (Array.isArray(target) && target.length > 0)) {
+      const result = this.tools?.dataFM.getRowsByTarget(this.table.rows, target);
+      if (result && result.length > 0) {
+        this.setSelectedStatus(result, false);
+      }
+    } else if (this.table) {
+      this.setSelectedStatus(this.table?.rows, false);
+    }
+  }
+
+  /**
+   * 清空目标checkbox勾选记录
+   * @param target 可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组，不传或者为空则清空全部选中状态
+   * @return 无返回
+   */
+  clearTicked(target: any = undefined) {
+    if (target || (Array.isArray(target) && target.length > 0)) {
+      const result = this.tools?.dataFM.getRowsByTarget(this.table.rows, target);
+      if (result && result.length > 0) {
+        this.setTickedStatus(result, false);
+      }
+    } else if (this.table) {
+      this.setTickedStatus(this.table.rows, false);
+    }
+  }
+
+  /**
+   * 展开表格行
+   * @param target 树表格模式：可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组，不传或者为空则展开全部
+   * 独立分组模式：可传入当前分组字段的值，不传或者为空则展开全部
+   * @param cascadeChildren 树表格模式：是否级联子，级联模式下所有的子节点也展开，独立分组模式该参数无效。
+   */
+  expand(target: any = undefined, cascadeChildren: boolean = false) {
+    const expand = true;
+    if (this.props.tree) {
+      // 树表格模式
+      this.processTree(target, expand, cascadeChildren);
+    } else {
+      // 独立分组模式
+      this.processGroup(target, expand);
+    }
+  }
+
+  /**
+   * 收起表格行
+   * @param target 树表格模式：可传入单个行对象、行主键、前端行主键，也可传入行对象数组、行主键数组、前端行主键数组，不传或者为空则收起全部
+   * 独立分组模式：可传入当前分组字段的值，不传或者为空则收起全部
+   * @param cascadeParents 树表格模式：是否级联父，级联模式下往上找，将传入数据的父节点收起，独立分组模式该参数无效。
+   */
+  collapse(target: any = undefined, cascadeParents: boolean = false) {
+    const expand = false;
+    if (this.props.tree) {
+      // 树表格模式
+      this.processTree(target, expand, cascadeParents);
+    } else {
+      // 独立分组模式
+      this.processGroup(target, expand);
+    }
+  }
+
+  private processTree(target: any, expand: boolean, cascade: boolean) {
+    const rows = target ? this.tools?.dataFM.getRowsByTarget(this.table.rows, target) : this.table.rows;
+    if (rows) {
+      rows.forEach((item: any) => {
+        item[Constant.FIELD_NAMES.EXPAND] = expand;
+        if (cascade && item.children && item.children.length > 0) {
+          this.tools?.opFM.resetTreeGridExpand(item.children, expand);
+        } else if (!expand) {
+          const parents = this.tools?.apiFM.getData.getCascadeParentsData(item, null);
+          if (parents && parents.length > 0) {
+            this.tools?.opFM.resetTreeGridExpand(parents, expand);
+          }
+        }
+      });
+    }
+  }
+  private processGroup(target: any, expand: boolean) {
+    if (target) {
+      const findResult = this.table.configStore.aloneGroupRecords.find((item) => item.groupName === target);
+      if (!findResult) {
+        console.error('[w-grid] groupRecords not find `' + target + '`.');
+        return;
+      }
+      findResult['expand'] = expand;
+    } else {
+      this.table.configStore.aloneGroupRecords.forEach((item) => {
+        item['expand'] = expand;
+      });
+    }
+  }
+  private setSelectedStatus(arr: Array<any>, status: boolean) {
+    arr.forEach((item) => {
+      item[this.props.selectedField] = status;
+      if (this.props.tree && item.children && item.children.length > 0) {
+        this.setSelectedStatus(item.children, status);
+      }
+    });
+  }
+  private setTickedStatus(arr: Array<any>, status: boolean, cascadeChildren: boolean = true) {
+    arr.forEach((item) => {
+      item[this.props.tickedField] = status;
+      if (this.props.tree && cascadeChildren && item.children && item.children.length > 0) {
+        this.setTickedStatus(item.children, status, cascadeChildren);
+      }
+    });
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/ResetProperty.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/ResetProperty.ts
new file mode 100644
index 00000000..e9fd0291
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/expose-api/src/ResetProperty.ts
@@ -0,0 +1,118 @@
+import { Base } from '../../Base';
+import { PropsType, TableType } from '../../index';
+
+/**
+ * w-grid 重新设置表格属性API
+ */
+export class ResetProperty extends Base {
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.setQueryCriteria = this.setQueryCriteria.bind(this);
+    this.setQueryCriteriaFieldValue = this.setQueryCriteriaFieldValue.bind(this);
+    this.setDataUrl = this.setDataUrl.bind(this);
+    this.setFetchDataUrl = this.setFetchDataUrl.bind(this);
+    this.setAddDataUrl = this.setAddDataUrl.bind(this);
+    this.setEditDataUrl = this.setEditDataUrl.bind(this);
+    this.setRemoveDataUrl = this.setRemoveDataUrl.bind(this);
+    this.setQueryCriteriaFieldValueHandler = this.setQueryCriteriaFieldValueHandler.bind(this);
+  }
+
+  /**
+   * 设置查询criteria
+   * @param criteria
+   * @returns
+   */
+  setQueryCriteria(criteria: any) {
+    if (!this.table) {
+      return;
+    }
+    this.table.queryCriteria = criteria;
+  }
+
+  /**
+   * 设置查询criteria中的字段值
+   * @param fieldName 字段名称
+   * @param fieldValue 字段值
+   * @return 无返回
+   */
+  setQueryCriteriaFieldValue(fieldName: string, fieldValue: any) {
+    if (Object.keys(this.table?.queryCriteria).length === 0) {
+      console.error('[w-grid]The property `queryCriteria` is configured.');
+      return;
+    }
+    this.setQueryCriteriaFieldValueHandler(this.table?.queryCriteria, fieldName, fieldValue);
+  }
+
+  /**
+   * 设置基础URL
+   * @param url
+   */
+  setDataUrl(url: string) {
+    if (!this.table) {
+      return;
+    }
+    this.table.url.dataUrl = url;
+  }
+
+  /**
+   * 设置数据查询URL
+   * @param url
+   * @returns
+   */
+  setFetchDataUrl(url: string) {
+    if (!this.table) {
+      return;
+    }
+    this.table.url.fetchDataUrl = url;
+  }
+
+  /**
+   * 设置新增时保存URL
+   * @param url
+   * @returns
+   */
+  setAddDataUrl(url: string) {
+    if (!this.table) {
+      return;
+    }
+    this.table.url.addDataUrl = url;
+  }
+
+  /**
+   * 设置修改时保存URL
+   * @param url
+   * @returns
+   */
+  setEditDataUrl(url: string) {
+    if (!this.table) {
+      return;
+    }
+    this.table.url.editDataUrl = url;
+  }
+
+  /**
+   * 设置删除url
+   * @param url
+   * @returns
+   */
+  setRemoveDataUrl(url: string) {
+    if (!this.table) {
+      return;
+    }
+    this.table.url.removeDataUrl = url;
+  }
+
+  private setQueryCriteriaFieldValueHandler(criteria: any, fieldName: string, fieldValue: any) {
+    if (criteria.criteria && criteria.criteria.length > 0) {
+      criteria.criteria.forEach((item) => {
+        if (!item.criteria && item.fieldName && item.fieldName === fieldName) {
+          item.value = fieldValue;
+        } else {
+          this.setQueryCriteriaFieldValueHandler(item.criteria, fieldName, fieldValue);
+        }
+      });
+    } else if (criteria.fieldName && criteria.fieldName === fieldName) {
+      criteria.value = fieldValue;
+    }
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Criteria.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Criteria.ts
new file mode 100644
index 00000000..f939eb34
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Criteria.ts
@@ -0,0 +1,158 @@
+import { Tools } from '@/platform';
+import { nextTick } from 'vue';
+import { Constant, PropsType, GridTools } from '../index';
+import { Base } from '../Base';
+import { criteriaOperator } from '../../../query-builder/criteria';
+import { TableType } from '../types/TableType';
+
+// 定义数据结构类型
+interface CriteriaType {
+  fieldName?: string;
+  operator: string;
+  value?: any;
+  start?: any;
+  end?: any;
+  criteria?: CriteriaType[];
+}
+
+/**
+ * w-grid Criteria相关函数
+ */
+export class Criteria extends Base {
+  /**
+   * 查询面板配置的字段对象
+   */
+  queryFormFields: any;
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.queryFormFields = GridTools.arrayToObject(props.queryFormFields, 'name');
+    this.buildCriteria = this.buildCriteria.bind(this);
+    this.buildURLSearchParams = this.buildURLSearchParams.bind(this);
+  }
+
+  /**
+   * 根据字段值与字段名构建 criteria 查询对象
+   * @param value
+   * @param fieldName
+   * @returns
+   */
+  private buildCriteria(value: any, fieldName: string) {
+    const queryOperator = this.queryFormFields[fieldName]['queryOperator'];
+    if (!Tools.isEmpty(queryOperator)) {
+      return {
+        fieldName: fieldName,
+        operator: queryOperator,
+        value: value,
+      };
+    } else if (typeof value === 'boolean' || typeof value === 'number' || (typeof value === 'string' && this.queryFormFields[fieldName]['type'] === 'w-date')) {
+      return {
+        fieldName: fieldName,
+        operator: Constant.CRITERIA_OPERATOR.equals,
+        value: value,
+      };
+    } else if (Array.isArray(value)) {
+      return {
+        fieldName: fieldName,
+        operator: Constant.CRITERIA_OPERATOR.inSet,
+        value: value,
+      };
+    } else if (typeof value === 'object' && this.queryFormFields[fieldName]['type'] === 'w-date-range') {
+      return {
+        fieldName: fieldName,
+        operator: Constant.CRITERIA_OPERATOR.betweenInclusive,
+        start: value['from'],
+        end: value['to'],
+      };
+    } else {
+      return {
+        fieldName: fieldName,
+        operator: Constant.CRITERIA_OPERATOR.contains,
+        value: value,
+      };
+    }
+  }
+
+  /**
+   * 根据请求入参拼上查询面板构建 criteria 查询对象，转换成 URLSearchParams 后返回
+   * @param reqParams 请求入参
+   * @returns URLSearchParams 对象
+   */
+  buildURLSearchParams(reqParams) {
+    const urlSearchParams = new URLSearchParams(reqParams);
+    // 处理默认查询条件
+    if (Object.keys(this.table.queryCriteria).length > 0) {
+      urlSearchParams.append('criteria', JSON.stringify(this.table.queryCriteria));
+    }
+    if (this.table.advancedQueryStatus) {
+      const conditions = this.advancedQueryConditions();
+      if (conditions && conditions.criteria.length > 0) {
+        urlSearchParams.append('criteria', JSON.stringify(conditions));
+      }
+    } else {
+      const queryForm = this.table.componentRef.getTopRef()?.getQueryForm();
+      if (queryForm) {
+        nextTick(() => {
+          const queryFormData = queryForm.getData();
+          Object.keys(queryFormData).forEach((item) => {
+            if (
+              (!Tools.isEmpty(queryFormData[item]) && !Array.isArray(queryFormData[item])) ||
+              (!Tools.isEmpty(queryFormData[item]) && Array.isArray(queryFormData[item]) && queryFormData[item].length > 0)
+            ) {
+              // 根据数据进行operator处理
+              const criteria = this.buildCriteria(queryFormData[item], item);
+              urlSearchParams.append('criteria', JSON.stringify(criteria));
+            }
+          });
+        });
+      }
+    }
+    return urlSearchParams;
+  }
+
+  /**
+   * 高级查询条件处理，排除掉所有字段名或者值为空的条件
+   * @returns
+   */
+  private advancedQueryConditions() {
+    let conditions: any = undefined;
+    if (this.table.advancedQueryModelValue && this.table.advancedQueryModelValue['criteria'][0]['fieldName']) {
+      conditions = {
+        ...this.table.advancedQueryModelValue,
+        criteria: this.cleanCriteria(this.table.advancedQueryModelValue['criteria']),
+      };
+    }
+    return conditions;
+  }
+
+  /**
+   *
+   * 清除无效criteria
+   * @param criteria
+   * @returns
+   */
+  private cleanCriteria(criteria: CriteriaType[]): CriteriaType[] {
+    return criteria.filter((c) => {
+      if (Tools.isEmpty(c.fieldName)) {
+        return false;
+      } else if (c.operator === criteriaOperator.between.name || c.operator === criteriaOperator.notBetween.name) {
+        if (Tools.isEmpty(c.start) && Tools.isEmpty(c.end)) {
+          return false;
+        }
+      } else if (
+        c.operator !== criteriaOperator.isBlank.name &&
+        c.operator !== criteriaOperator.notBlank.name &&
+        c.operator !== criteriaOperator.isNull.name &&
+        c.operator !== criteriaOperator.notNull.name &&
+        Tools.isEmpty(c.value)
+      ) {
+        return false;
+      }
+      // 如果存在嵌套的criteria，则递归调用
+      if (c.criteria) {
+        c.criteria = this.cleanCriteria(c.criteria);
+      }
+      return true;
+    });
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/DragAndDrop.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/DragAndDrop.ts
new file mode 100644
index 00000000..c46fe840
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/DragAndDrop.ts
@@ -0,0 +1,411 @@
+import { Tools } from '@/platform';
+import { toRaw, Ref, ref } from 'vue';
+import { Constant, PropsType, TableType } from '../index';
+import { Base } from '../Base';
+
+/**
+ * w-grid 表格拖拽相关函数
+ */
+export class DragAndDrop extends Base {
+  /**
+   * 拖拽线样式
+   */
+  static DRAG_LINE_STYLE = {
+    width: '2px',
+    style: 'dashed',
+    color: 'orange',
+  };
+  static DRAG_ICON = {
+    // 拖拽时父节点图标
+    name: 'bi-folder-symlink-fill',
+    color: 'amber',
+  };
+  private static OPERATOR_ADD = 'add';
+  private static OPERATOR_REMOVE = 'remove';
+  private static POSITION_TOP = 'borderTop';
+  private static POSITION_BOTTOM = 'borderBottom';
+
+  /**
+   * 拖拽过程中停留在图标与名字区域的计时器
+   */
+  timer: any = undefined;
+  /**
+   * 拖拽过程中停留在图标与名字区域的时间（用来判定是否需要展开该节点）
+   */
+  iconAndNameDwellTime: Ref = ref(0);
+  /**
+   * 拖拽过程中停留在图标与名字区域行
+   */
+  dwellRow: any = undefined;
+
+  // 待更新排序数据
+  private updateOrderData = <any>[];
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.onDragStart = this.onDragStart.bind(this);
+    this.onDragEnd = this.onDragEnd.bind(this);
+    this.iconAndNameDragOver = this.iconAndNameDragOver.bind(this);
+    this.onDragOver = this.onDragOver.bind(this);
+    this.onDragLeave = this.onDragLeave.bind(this);
+    this.onDrop = this.onDrop.bind(this);
+    this.setDragIcon = this.setDragIcon.bind(this);
+
+    this.destroyTimer = this.destroyTimer.bind(this);
+    this.dropTargetIsIconAndName = this.dropTargetIsIconAndName.bind(this);
+    this.resetOrder = this.resetOrder.bind(this);
+    this.resetOrderDataHandler = this.resetOrderDataHandler.bind(this);
+    this.removeRecord = this.removeRecord.bind(this);
+    this.nodeSplice = this.nodeSplice.bind(this);
+    this.dragLessThanTarget = this.dragLessThanTarget.bind(this);
+    this.setOrder = this.setOrder.bind(this);
+    this.childrenResetOrder = this.childrenResetOrder.bind(this);
+    this.canDrag = this.canDrag.bind(this);
+    this.iconAndNameCanDrag = this.iconAndNameCanDrag.bind(this);
+    this.dragRecordsContains = this.dragRecordsContains.bind(this);
+    this.setDndStyle = this.setDndStyle.bind(this);
+  }
+
+  // 拖拽开始
+  public onDragStart(e: any, scope: any) {
+    const img = new Image();
+    img.src = Constant.DND_BG_IMAGE;
+    e.dataTransfer.setDragImage(img, 0, 0);
+    const selecteds = this.instance.getSelectedRows();
+    if (
+      selecteds.length > 0 &&
+      selecteds.findIndex((item) => {
+        return item[Constant.FIELD_NAMES.ROW_KEY] === scope.row[Constant.FIELD_NAMES.ROW_KEY];
+      }) > -1
+    ) {
+      this.table.store.dragRecords = selecteds;
+    } else {
+      this.instance.clearSelected();
+      // 触发选择
+      scope.row[this.props.selectedField] = true;
+      this.table.store.dragRecords = [scope.row];
+    }
+    e.dataTransfer.effectAllowed = 'move';
+  }
+
+  // 销毁计时器
+  private destroyTimer() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = undefined;
+    }
+    this.iconAndNameDwellTime.value = 0;
+    this.dwellRow = undefined;
+  }
+
+  // 拖拽结束
+  onDragEnd(e: any, scope: any) {
+    this.destroyTimer();
+  }
+
+  /**
+   * 拖拽至图标与名字区域触发
+   * @param e
+   * @param scope
+   */
+  iconAndNameDragOver(e: any, row: any) {
+    if (!this.iconAndNameCanDrag(this.table?.store.dragRecords, row[this.props.primaryKey])) {
+      this.setDndStyle(e, DragAndDrop.OPERATOR_REMOVE, DragAndDrop.POSITION_TOP);
+      this.setDndStyle(e, DragAndDrop.OPERATOR_REMOVE, DragAndDrop.POSITION_BOTTOM);
+      this.setDragIcon(this.table?.rows);
+      e.dataTransfer.dropEffect = 'none';
+    } else {
+      if (!this.timer) {
+        this.timer = setInterval(() => {
+          this.iconAndNameDwellTime.value++;
+        }, 500);
+        this.dwellRow = row;
+      }
+      row['_dragIcon_'] = DragAndDrop.DRAG_ICON.name;
+    }
+  }
+
+  // 拖拽过程触发
+  onDragOver(e: any, scope: any, trMiddleHeight: number) {
+    e.preventDefault();
+    if (!this.canDrag(this.table?.store.dragRecords, scope.row[this.props.foreignKey])) {
+      this.setDndStyle(e, DragAndDrop.OPERATOR_REMOVE, DragAndDrop.POSITION_TOP);
+      this.setDndStyle(e, DragAndDrop.OPERATOR_REMOVE, DragAndDrop.POSITION_BOTTOM);
+      this.setDragIcon(this.table?.rows);
+      e.dataTransfer.dropEffect = 'none';
+    } else {
+      if (e.offsetY <= trMiddleHeight && !this.dragRecordsContains(scope.row)) {
+        this.setDndStyle(e, DragAndDrop.OPERATOR_REMOVE, DragAndDrop.POSITION_BOTTOM);
+        this.setDndStyle(e, DragAndDrop.OPERATOR_ADD, DragAndDrop.POSITION_TOP);
+      } else if (e.offsetY > trMiddleHeight && !this.dragRecordsContains(scope.row)) {
+        this.setDndStyle(e, DragAndDrop.OPERATOR_REMOVE, DragAndDrop.POSITION_TOP);
+        this.setDndStyle(e, DragAndDrop.OPERATOR_ADD, DragAndDrop.POSITION_BOTTOM);
+      }
+      if (!this.dropTargetIsIconAndName(e)) {
+        this.destroyTimer();
+        if (!Tools.isUndefinedOrNull(scope.row[this.props.foreignKey])) {
+          this.setDragIcon(this.table?.rows, scope.row[this.props.foreignKey]);
+        } else {
+          this.setDragIcon(this.table?.rows);
+        }
+      }
+      e.dataTransfer.dropEffect = 'move';
+    }
+    e.stopPropagation();
+  }
+
+  /**
+   * 判定放置目标是否为图标与名字div
+   * @param e
+   * @returns
+   */
+  private dropTargetIsIconAndName(e) {
+    return typeof e.target.className === 'string' && e.target.className.split(' ').includes('treeGridIconAndName');
+  }
+
+  // 拖拽至不可放置区域触发
+  onDragLeave(e) {
+    this.setDndStyle(e, DragAndDrop.OPERATOR_REMOVE, DragAndDrop.POSITION_TOP);
+    this.setDndStyle(e, DragAndDrop.OPERATOR_REMOVE, DragAndDrop.POSITION_BOTTOM);
+    this.destroyTimer();
+  }
+
+  // 拖拽放置时触发
+  onDrop(e: any, scope: any, trMiddleHeight: number) {
+    e.preventDefault();
+    this.setDndStyle(e, DragAndDrop.OPERATOR_REMOVE, DragAndDrop.POSITION_TOP);
+    this.setDndStyle(e, DragAndDrop.OPERATOR_REMOVE, DragAndDrop.POSITION_BOTTOM);
+    this.setDragIcon(this.table?.rows);
+    if (!this.table) {
+      return false;
+    }
+    if (
+      this.table.store.dragRecords.findIndex((item) => {
+        return item[Constant.FIELD_NAMES.ROW_KEY] === scope.row[Constant.FIELD_NAMES.ROW_KEY];
+      }) > -1
+    ) {
+      return;
+    }
+    // 每次放置时清空待更新集合
+    this.updateOrderData.splice(0, this.updateOrderData.length);
+
+    if (this.dropTargetIsIconAndName(e)) {
+      this.table.store.dragRecords.forEach((item) => {
+        // 从表格数据中将拖拽数据删除
+        this.removeRecord(this.table?.rows, item);
+
+        // 重新设置父
+        item[this.props.foreignKey] = scope.row[this.props.primaryKey];
+        // 将拖动的数据全部加入到父的children中
+        if (scope.row.children) {
+          scope.row.children.push(item);
+        } else {
+          scope.row.children = [item];
+        }
+        this.updateOrderData.push(item);
+      });
+    } else {
+      // 将拖动的数据及其子节点放到目标数据位置，并将目标数据父节点下的子节点重新排序。
+      this.resetOrder(e, this.table.store.dragRecords, this.table.rows, scope.row, trMiddleHeight);
+    }
+
+    // 请求后端更新排序
+    if (this.props.dndMode === Constant.DND_MODE.SERVER && this.updateOrderData.length > 0) {
+      this.tools?.reqApiFM.updates(this.updateOrderData);
+    }
+
+    this.tools?.em.afterDragAndDrop(this.updateOrderData);
+  }
+
+  // 重新设置树的排序
+  private resetOrder(e, dragRecords, arr, targetData, trMiddleHeight: number) {
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i][Constant.FIELD_NAMES.ROW_KEY] === targetData[Constant.FIELD_NAMES.ROW_KEY]) {
+        this.resetOrderDataHandler(e, dragRecords, targetData, i, trMiddleHeight);
+        break;
+      } else if (arr[i].children && arr[i].children.length > 0) {
+        this.resetOrder(e, dragRecords, arr[i].children, targetData, trMiddleHeight);
+      }
+    }
+  }
+
+  // 数据处理
+  private resetOrderDataHandler(e, dragRecords, targetData, targetIndex, trMiddleHeight: number) {
+    dragRecords.forEach((item) => {
+      // 从表格数据中将拖拽数据删除
+      const itemIndex = this.removeRecord(this.table?.rows, item);
+      if (Tools.isEmpty(targetData[this.props.foreignKey])) {
+        this.nodeSplice(e, itemIndex, targetIndex, item, targetData, this.table?.rows, trMiddleHeight);
+        item[this.props.foreignKey] = null;
+        this.setOrder(this.table?.rows);
+      } else {
+        this.childrenResetOrder(e, this.table?.rows, item, targetData, itemIndex, targetIndex, trMiddleHeight);
+      }
+    });
+  }
+
+  // 删除表格中的数据
+  private removeRecord(arr, removeData) {
+    let index = 0;
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i][Constant.FIELD_NAMES.ROW_KEY] === removeData[Constant.FIELD_NAMES.ROW_KEY]) {
+        arr.splice(i, 1);
+        index = i;
+        break;
+      } else if (arr[i].children && arr[i].children.length > 0) {
+        const a = this.removeRecord(arr[i].children, removeData);
+        if (a > 0) {
+          index = a;
+        }
+      }
+    }
+    return index;
+  }
+
+  // 处理树节点的增加
+  private nodeSplice(e, dragIndex, targetIndex, drag, target, arr, trMiddleHeight: number) {
+    if (
+      (Tools.isEmpty(drag[this.props.foreignKey]) && Tools.isEmpty(target[this.props.foreignKey])) ||
+      drag[this.props.foreignKey] === target[this.props.foreignKey]
+    ) {
+      const lessThanResult = this.dragLessThanTarget(dragIndex, targetIndex);
+      // 父节点相同的同级处理
+      if (e.offsetY <= trMiddleHeight && lessThanResult) {
+        arr.splice(targetIndex - 1, 0, drag);
+      } else if (e.offsetY > trMiddleHeight && !lessThanResult) {
+        arr.splice(targetIndex + 1, 0, drag);
+      } else {
+        arr.splice(targetIndex, 0, drag);
+      }
+    } else {
+      // 拖拽节点与目标节点不同级处理
+      if (e.offsetY <= trMiddleHeight) {
+        arr.splice(targetIndex, 0, drag);
+      } else if (e.offsetY > trMiddleHeight) {
+        arr.splice(targetIndex + 1, 0, drag);
+      }
+    }
+  }
+
+  private dragLessThanTarget(dragIndex, targetIndex) {
+    if (dragIndex < targetIndex) {
+      return true;
+    }
+    return false;
+  }
+
+  // 设置排序号
+  private setOrder(arr) {
+    arr.forEach((item, index) => {
+      item[this.props.dndOrderBy] = index + 1;
+      // 添加至待更新集合中
+      this.updateOrderData.push({ ...toRaw(item), children: null });
+    });
+  }
+
+  // 增加并重新设置父属性
+  private childrenResetOrder(e, arr, addData, targetData, dragIndex, targetIndex, trMiddleHeight: number) {
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i][this.props.primaryKey] === targetData[this.props.foreignKey]) {
+        this.nodeSplice(e, dragIndex, targetIndex, addData, targetData, arr[i].children, trMiddleHeight);
+        // 修改父
+        addData[this.props.foreignKey] = arr[i][this.props.primaryKey];
+        // 重新设置排序号
+        this.setOrder(arr[i].children);
+        break;
+      } else if (arr[i].children && arr[i].children.length > 0) {
+        this.childrenResetOrder(e, arr[i].children, addData, targetData, dragIndex, targetIndex, trMiddleHeight);
+      }
+    }
+  }
+
+  // 设置拖拽目标的父节点icon图标
+  setDragIcon(arr: any, key: string = '') {
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i].children && arr[i].children.length > 0) {
+        if (!Tools.isEmpty(key) && arr[i][this.props.primaryKey] === key) {
+          if (Tools.isEmpty(arr[i]['_dragIcon_']) || arr[i]['_dragIcon_'] !== DragAndDrop.DRAG_ICON.name) {
+            arr[i]['_dragIcon_'] = DragAndDrop.DRAG_ICON.name;
+          }
+        } else {
+          arr[i]['_dragIcon_'] = '';
+        }
+        this.setDragIcon(arr[i].children, key);
+      } else {
+        arr[i]['_dragIcon_'] = '';
+      }
+    }
+  }
+
+  /**
+   * 判断是否可以拖拽
+   * @param dragRecords 拖拽的记录集
+   * @param targetParentKey 当前鼠标所在的目标行的父节点key
+   */
+  private canDrag(dragRecords, targetParentKey) {
+    if (Tools.isEmpty(targetParentKey)) {
+      return true;
+    }
+    // 判断拖拽的行是否为当前鼠标所在的目标行的父节点（只要存在父，一直往上找）
+    let result = true;
+    let parentKey = targetParentKey;
+    while (!Tools.isEmpty(parentKey)) {
+      if (
+        dragRecords.findIndex((item) => {
+          return item[this.props.primaryKey] === parentKey;
+        }) > -1
+      ) {
+        result = false;
+        parentKey = null;
+      } else {
+        parentKey = this.tools?.dataFM.getRow(this.table.rows, parentKey, true)[this.props.foreignKey];
+      }
+    }
+    return result;
+  }
+
+  /**
+   * 判断图标与名字区域是否可以拖拽
+   * @param dragRecords 拖拽的记录集
+   * @param targetPrimaryKey 当前鼠标所在的目标行的主键
+   */
+  private iconAndNameCanDrag(dragRecords: any, targetPrimaryKey: any) {
+    let result = true;
+    for (let i = 0; i < dragRecords.length; i++) {
+      const record = dragRecords[i];
+      if (record[this.props.primaryKey] === targetPrimaryKey) {
+        result = false;
+        break;
+      }
+    }
+    return result;
+  }
+
+  // 根据传入的数据行判断是否在当前拖拽的记录集合中
+  private dragRecordsContains(dataRow) {
+    if (!this.table) {
+      return false;
+    }
+    return (
+      this.table.store.dragRecords.findIndex((item) => {
+        return item[Constant.FIELD_NAMES.ROW_KEY] === dataRow[Constant.FIELD_NAMES.ROW_KEY];
+      }) > -1
+    );
+  }
+
+  private setDndStyle(e: any, operator: string, position: string) {
+    let targetChildrenNodes: any = [];
+    if (e.target.nodeName === 'TD') {
+      targetChildrenNodes = e.target?.parentNode?.children;
+    } else if (e.target.nodeName === 'DIV' && e.target.className.split(' ').includes('treeGridFirstTd')) {
+      targetChildrenNodes = e.target?.parentNode?.parentNode?.children;
+    }
+    if (targetChildrenNodes) {
+      for (let i = 0; i < targetChildrenNodes.length; i++) {
+        targetChildrenNodes[i].style[position + 'Width'] = operator === DragAndDrop.OPERATOR_ADD ? DragAndDrop.DRAG_LINE_STYLE.width : '';
+        targetChildrenNodes[i].style[position + 'Style'] = operator === DragAndDrop.OPERATOR_ADD ? DragAndDrop.DRAG_LINE_STYLE.style : '';
+        targetChildrenNodes[i].style[position + 'Color'] = operator === DragAndDrop.OPERATOR_ADD ? DragAndDrop.DRAG_LINE_STYLE.color : '';
+      }
+    }
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/InlineEdit.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/InlineEdit.ts
new file mode 100644
index 00000000..9bf1ec5e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/InlineEdit.ts
@@ -0,0 +1,112 @@
+import { Tools } from '@/platform';
+import { Base } from '../Base';
+import { Constant, PropsType, TableType } from '../index';
+
+/**
+ * w-grid 内联编辑函数
+ */
+export class InlineEdit extends Base {
+  /**
+   * 内联编辑时所有组件的 ref 对象
+   */
+  componentRef = {};
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.setComponentRef = this.setComponentRef.bind(this);
+    this.getComponentRef = this.getComponentRef.bind(this);
+    this.getComponentRefs = this.getComponentRefs.bind(this);
+    this.exitInlineEdit = this.exitInlineEdit.bind(this);
+    this.getEditorFieldByName = this.getEditorFieldByName.bind(this);
+    this.isShowInlineEditor = this.isShowInlineEditor.bind(this);
+  }
+
+  /**
+   * 设置内联编辑时组件的 ref 对象
+   * @param el html 元素
+   * @param row 行数据
+   * @param col 列对象
+   */
+  public setComponentRef(el: any, row: any, col: any) {
+    if (el && !Tools.isEmpty(col.name)) {
+      this.componentRef[row[Constant.FIELD_NAMES.ROW_KEY] + '_' + col.name] = el;
+    }
+  }
+
+  /**
+   * 获取内联编辑时组件的 ref 对象
+   * @param rowKey 行主键
+   * @param colName  列名
+   */
+  public getComponentRef(rowKey: string, colName: string) {
+    return this.componentRef[rowKey + '_' + colName];
+  }
+
+  /**
+   * 获取所有内联编辑时组件的 ref 对象，传入空数组获取全部
+   * @param rowKey 行主键或者数组
+   * @returns
+   */
+  public getComponentRefs(rowKey: string | Array<string>) {
+    const refs = <any>[];
+    if (!Tools.isEmpty(this.componentRef)) {
+      const filterResult = Object.keys(this.componentRef).filter((item) => {
+        if (typeof rowKey === 'string') {
+          return item.startsWith(rowKey + '_');
+        } else {
+          return true;
+        }
+      });
+      if (filterResult.length > 0) {
+        filterResult.forEach((key) => {
+          refs.push(this.componentRef[key]);
+        });
+      }
+    }
+    return refs;
+  }
+
+  /**
+   * 退出内联编辑状态
+   */
+  public exitInlineEdit() {
+    if (this.table) {
+      this.table.store.inlineEditStatus = Constant.EDIT_STATUS.NONE;
+      this.table.store.cellSelected = undefined;
+    }
+  }
+
+  /**
+   * 根据传入的字段名获取表格 editor 中的配置。
+   * @param name
+   * @returns
+   */
+  public getEditorFieldByName(name: string) {
+    if (this.table && this.props?.editor?.form?.fields) {
+      const field = this.props.editor.form.fields.find((item) => item['name'] === name);
+      return field;
+    }
+    return undefined;
+  }
+
+  /**
+   * 是否显示内联编辑界面
+   * @param col
+   * @param rowKey
+   * @returns
+   */
+  public isShowInlineEditor(col: object, rowKey: string) {
+    if (Tools.hasOwnProperty(col, 'edit') && !col['edit']) {
+      return false;
+    }
+    if (
+      this.getEditorFieldByName(col['name']) &&
+      ((this.tools?.dataFM.isSelectedRow(rowKey) && this.table.store.inlineEditStatus === Constant.EDIT_STATUS.ROW) ||
+        this.table?.store.inlineEditStatus === Constant.EDIT_STATUS.ROWS ||
+        (this.tools?.dataFM.isSelectedCell(rowKey, col['name']) && this.table.store.inlineEditStatus === Constant.EDIT_STATUS.CELL))
+    ) {
+      return true;
+    }
+    return false;
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Operator.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Operator.ts
new file mode 100644
index 00000000..a63bcb32
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Operator.ts
@@ -0,0 +1,272 @@
+import { Tools } from '@/platform';
+import { nextTick } from 'vue';
+import { Base } from '../Base';
+import { Constant, PropsType, TableType } from '../index';
+
+/**
+ * w-grid 表格操作函数
+ */
+export class Operator extends Base {
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.tableFullscreen = this.tableFullscreen.bind(this);
+    this.resetHeaderCheckbox = this.resetHeaderCheckbox.bind(this);
+    this.resetTreeGridExpand = this.resetTreeGridExpand.bind(this);
+    this.propsValidate = this.propsValidate.bind(this);
+    this.resize = this.resize.bind(this);
+    this.resetStyleVariableValue = this.resetStyleVariableValue.bind(this);
+  }
+
+  /**
+   * 表格全屏触发函数
+   * @param value true: 进入全屏, false: 退出全屏
+   */
+  tableFullscreen(value) {
+    this.table.configStore.isFullscreen = !this.table.configStore.isFullscreen;
+    if (value) {
+      this.table.store.location.tableInFullscreenY = this.table.store.location.yLocation;
+      this.table.store.location.noDataTrInFullscreenY = this.table.store.location.noDataTrYLocation;
+    } else {
+      this.table.store.location.yLocation = this.table.store.location.tableInFullscreenY;
+      this.table.store.location.noDataTrYLocation = this.table.store.location.noDataTrInFullscreenY;
+      this.table.store.location.tableInFullscreenY = 0;
+      this.table.store.location.noDataTrInFullscreenY = 0;
+    }
+  }
+
+  /**
+   * 重新设置表头勾选框状态
+   */
+  public resetHeaderCheckbox() {
+    this.tableError();
+    if (this.table) {
+      if (this.props.checkboxSelection) {
+        const ticked_ = <any>[];
+        const rows = this.table?.rows || [];
+        rows.forEach((item) => {
+          if (item[this.props.tickedField]) {
+            ticked_.push(item);
+          }
+        });
+        if (ticked_.length === rows.length && rows.length > 0) {
+          // 全部勾选设置为 true
+          this.table.store.headerTicked = true;
+        } else if (ticked_.length > 0) {
+          // 存在一条勾选的记录设置为 null
+          this.table.store.headerTicked = null;
+        } else {
+          // 一条勾选的记录都没有设置为 false
+          this.table.store.headerTicked = false;
+        }
+      }
+    }
+  }
+
+  /**
+   * 重新设置树表格的展开状态
+   * @param arr 需要设置的行数据集合
+   * @param expandStatus 需要设置的状态
+   */
+  public resetTreeGridExpand(arr: Array<any>, expandStatus: boolean) {
+    if (!this.props.tree) {
+      return;
+    }
+    arr.forEach((item) => {
+      item[Constant.FIELD_NAMES.EXPAND] = expandStatus;
+      if (item.children && item.children.length > 0) {
+        this.resetTreeGridExpand(item.children, expandStatus);
+      }
+    });
+  }
+
+  /**
+   * 表格属性校验
+   */
+  propsValidate() {
+    if (
+      !Tools.isEmpty(this.props.groupMode) &&
+      ((typeof this.props.groupByField === 'string' && Tools.isEmpty(this.props.groupByField)) ||
+        (Array.isArray(this.props.groupByField) && this.props.groupByField.length === 0))
+    ) {
+      console.warn('[w-grid]Configured the `groupMode` property but did not configure the `groupByField` property.');
+    } else if (!Tools.isEmpty(this.props.groupMode)) {
+      const groupByField =
+        typeof this.props.groupByField === 'string' ? [this.props.groupByField] : Array.isArray(this.props.groupByField) ? this.props.groupByField : undefined;
+      if (groupByField && this.table?.columns.findIndex((item) => groupByField.includes(item.name)) === -1) {
+        throw new Error('[w-grid]`groupByField` configuration cannot be found in the table columns.');
+      }
+    }
+  }
+
+  /**
+   * 表格大小变化触发函数
+   * @returns
+   */
+  resize() {
+    if (!this || !this.table) {
+      return;
+    }
+    const tableElement = this.instance?.getHtmlElement();
+    if (!tableElement) {
+      return;
+    }
+    this.table.store.resizeFlag = !this.table.store.resizeFlag;
+    this.table.componentRef.getTopRef()?.handleQueryFormShowField();
+    this.table.componentRef.getTopRef()?.handleToolbarActions();
+    if (tableElement) {
+      this.table.store.location.yLocation = tableElement.getBoundingClientRect().y;
+      if (tableElement.getElementsByClassName('noDataTr').length > 0) {
+        this.table.store.location.noDataTrYLocation = tableElement.getElementsByClassName('noDataTr')[0].getBoundingClientRect().y;
+      }
+      this.table.store.location.topHeight = tableElement.getElementsByClassName('q-table__top')[0]?.clientHeight;
+      this.table.store.location.middleWidth = tableElement.getElementsByClassName('q-table__middle')[0]?.clientWidth;
+      this.table.store.location.middleScrollWidth = tableElement.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
+      this.table.store.location.columnHeadHeight = tableElement.getElementsByTagName('thead')[0]?.clientHeight;
+      this.table.store.location.hideHeaderNoDataHeight = tableElement.getElementsByClassName('q-table__middle')[0]?.clientHeight;
+      // 判断是否有数据，没数据修改 middleHeight
+      if ((this.table.rows && this.table.rows.length > 0) || this.props.hideBottom) {
+        this.table.store.location.middleHeight = tableElement.getElementsByClassName('q-table__middle')[0]?.clientHeight;
+      } else {
+        let scrollHeight = 0;
+        if (this.table.store.location.middleScrollWidth - this.table.store.location.middleWidth > 0) {
+          scrollHeight = 15;
+        }
+        this.table.store.location.middleHeight = this.table.store.location.columnHeadHeight + scrollHeight;
+      }
+      let titleTotalHeight = tableElement.getElementsByTagName('thead')[0]?.offsetHeight;
+      // 无数据时列头会增加一行，多表头的top距离计算会出错，需减掉多出来的提示行。
+      if (this.table.rows.length === 0) {
+        const noDataTrHeight = tableElement.getElementsByClassName('noDataTr')[0]?.offsetHeight;
+        if (titleTotalHeight && titleTotalHeight > 0) {
+          titleTotalHeight = titleTotalHeight - noDataTrHeight;
+        } else {
+          titleTotalHeight = noDataTrHeight;
+        }
+      }
+      this.table.store.location.titleTotalHeight = titleTotalHeight;
+    }
+  }
+
+  /**
+   * 重新设置样式变量值
+   * @param time 延迟时间
+   */
+  public resetStyleVariableValue(time: number = 500) {
+    const tableElement = this.instance.getHtmlElement();
+    setTimeout(() => {
+      if (!this.table) {
+        this.tableError();
+        return;
+      }
+      if (tableElement) {
+        this.table.store.location.yLocation = tableElement.getBoundingClientRect()?.y;
+        if (tableElement.getElementsByClassName('noDataTr').length > 0) {
+          this.table.store.location.noDataTrYLocation = tableElement.getElementsByClassName('noDataTr')[0]?.getBoundingClientRect().y;
+        }
+        this.table.store.location.topHeight = tableElement.getElementsByClassName('q-table__top')[0]?.clientHeight;
+        this.table.store.location.bottomHeight = tableElement.getElementsByClassName('q-table__bottom')[0]?.clientHeight;
+        this.table.store.location.middleWidth = tableElement.getElementsByClassName('q-table__middle')[0]?.clientWidth;
+        this.table.store.location.middleScrollWidth = tableElement.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
+        this.table.store.location.columnHeadHeight = tableElement.getElementsByTagName('thead')[0]?.clientHeight;
+        this.table.store.location.hideHeaderNoDataHeight = tableElement.getElementsByClassName('q-table__middle')[0]?.clientHeight;
+        // 判断是否有数据，没数据修改 middleHeight
+        if (this.table?.rows?.length > 0 || this.props.hideBottom) {
+          this.table.store.location.middleHeight = tableElement.getElementsByClassName('q-table__middle')[0]?.clientHeight;
+        } else {
+          let scrollHeight = 0;
+          if (this.table.store.location.middleScrollWidth - this.table.store.location.middleWidth > 0) {
+            scrollHeight = 15;
+          }
+          this.table.store.location.middleHeight = this.table.store.location.columnHeadHeight + scrollHeight;
+        }
+
+        const tableDom = tableElement.getElementsByTagName('table')[0];
+        if (this.table.configStore.stickyNum > 0) {
+          if (this.table.componentRef.getHeaderRef()?.getColumnTitleState()?.columnTitleRowNum > 1) {
+            const theadDom = tableDom.getElementsByTagName('thead')[0];
+            const theadTrDom = theadDom.getElementsByTagName('tr');
+            tableDom.style.setProperty('--columnWidth' + '-' + 0 + '-' + 0, 0 + 'px');
+            for (let i = 0; i < theadDom.getElementsByTagName('tr').length; i++) {
+              const theadThDom = theadTrDom[i].getElementsByTagName('th');
+              for (let k = 0; k < theadThDom.length; k++) {
+                tableDom.style.setProperty('--columnWidth' + '-' + (i + 1) + '-' + (k + 1), theadThDom[k].offsetWidth + 'px');
+              }
+            }
+          }
+
+          const column1Width = tableDom.getElementsByTagName('td')[0]?.offsetWidth;
+          const column2Width = tableDom.getElementsByTagName('td')[1]?.offsetWidth;
+          const column3Width = tableDom.getElementsByTagName('td')[2]?.offsetWidth;
+          const column4Width = tableDom.getElementsByTagName('td')[3]?.offsetWidth;
+          const column5Width = tableDom.getElementsByTagName('td')[4]?.offsetWidth;
+          const column6Width = tableDom.getElementsByTagName('td')[5]?.offsetWidth;
+          const column7Width = tableDom.getElementsByTagName('td')[6]?.offsetWidth;
+          const column8Width = tableDom.getElementsByTagName('td')[7]?.offsetWidth;
+          const column9Width = tableDom.getElementsByTagName('td')[8]?.offsetWidth;
+
+          tableDom.style.setProperty('--column1Width', column1Width + 'px');
+          tableDom.style.setProperty('--column2Width', column1Width + column2Width + 'px');
+          tableDom.style.setProperty('--column3Width', column1Width + column2Width + column3Width + 'px');
+          tableDom.style.setProperty('--column4Width', column1Width + column2Width + column3Width + column4Width + 'px');
+          tableDom.style.setProperty('--column5Width', column1Width + column2Width + column3Width + column4Width + column5Width + 'px');
+          tableDom.style.setProperty('--column6Width', column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + 'px');
+          tableDom.style.setProperty(
+            '--column7Width',
+            column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + 'px',
+          );
+          tableDom.style.setProperty(
+            '--column8Width',
+            column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + column8Width + 'px',
+          );
+          tableDom.style.setProperty(
+            '--column9Width',
+            column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + column8Width + column9Width + 'px',
+          );
+        }
+        let titleTotalHeight = tableDom.getElementsByTagName('thead')[0]?.offsetHeight;
+        // 无数据时列头会增加一行，多表头的top距离计算会出错，需减掉多出来的提示行。
+        if (this.table.rows.length === 0) {
+          const noDataTrHeight = tableElement.getElementsByClassName('noDataTr')[0]?.offsetHeight;
+          if (titleTotalHeight && titleTotalHeight > 0) {
+            titleTotalHeight = titleTotalHeight - noDataTrHeight;
+          } else {
+            titleTotalHeight = noDataTrHeight;
+          }
+        }
+        this.table.store.location.titleTotalHeight = titleTotalHeight;
+      }
+    }, time);
+
+    tableElement.getElementsByTagName('table')[0].style.setProperty('--tableHeadBgColor', this.table?.color.headBgColor);
+    tableElement.getElementsByTagName('table')[0].style.setProperty('--stickyBgColor', this.table?.color.stickyBgColor);
+    tableElement.getElementsByTagName('table')[0].style.setProperty('--tableBorderColor', this.table?.color.borderColor);
+    tableElement.getElementsByTagName('table')[0].style.setProperty('--tableColumnTitleHeight', (this.tools?.cm.denseHeader.value ? 28 : 48) + 'px');
+    let headerPadding = '8px';
+    if (this.tools?.cm.denseHeader) {
+      headerPadding = '4px';
+    }
+    tableElement.getElementsByTagName('table')[0].style.setProperty('--tableHeaderPadding', headerPadding);
+    let bodyPadding = '8px';
+    if (this.tools?.cm.denseBody) {
+      bodyPadding = '4px';
+    }
+    tableElement.getElementsByTagName('table')[0].style.setProperty('--tableBodyPadding', bodyPadding);
+    tableElement.getElementsByTagName('table')[0].style.setProperty('--tableBodyHeight', (this.tools?.cm.denseBody.value ? 24 : 48) + 'px');
+    nextTick(() => {
+      if (this.tools?.cm.denseBody.value && !this.props.hideBottom) {
+        if (tableElement.getElementsByClassName('q-table__bottom').length > 0) {
+          tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 33 + 'px');
+          tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 24 + 'px');
+        }
+      } else if (!this.props.hideBottom && tableElement.getElementsByClassName('q-table__bottom').length > 0) {
+        tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 50 + 'px');
+        tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 40 + 'px');
+      }
+    });
+    if (this.props.title || this.props.toolbarActions.length > 0 || this.props.configButton) {
+      tableElement.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '8px');
+    } else {
+      tableElement.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '0px');
+    }
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RequestApi.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RequestApi.ts
new file mode 100644
index 00000000..5560379c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RequestApi.ts
@@ -0,0 +1,339 @@
+import { $t, axios, noErrorAxios, NotifyManager, Tools, TreeBuilder, ServerExceptionHandler } from '@/platform';
+import { toRaw } from 'vue';
+import { Base } from '../Base';
+import { Constant, PropsType, TableType } from '../index';
+
+/**
+ * w-grid 请求后端API函数
+ */
+export class RequestApi extends Base {
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.fetchData = this.fetchData.bind(this);
+    this.treeFetchDataByForeignKey = this.treeFetchDataByForeignKey.bind(this);
+    this.save = this.save.bind(this);
+    this.updates = this.updates.bind(this);
+    this.remove = this.remove.bind(this);
+
+    this.requestHandle = this.requestHandle.bind(this);
+    this.responseHandle = this.responseHandle.bind(this);
+    this.setExpandDatas = this.setExpandDatas.bind(this);
+    this.setTreeExpandDatas = this.setTreeExpandDatas.bind(this);
+    this.setAlongGroupExpandDatas = this.setAlongGroupExpandDatas.bind(this);
+    this.getFetchUrl = this.getFetchUrl.bind(this);
+  }
+
+  /**
+   * 请求数据
+   * @param ops 分页排序信息
+   */
+  async fetchData(ops: any) {
+    this.tools?.editFM.exitInlineEdit();
+
+    this.table.store.loading = true;
+    const resp: any = await this.requestHandle(ops);
+    this.table.store.loading = false;
+
+    // 处理返回的结果
+    this.responseHandle(resp, ops);
+
+    this.tools?.dataFM.setExtraProperty(this.table.rows, ops);
+    this.tools?.opFM.resetHeaderCheckbox();
+    this.tools?.opFM.resetStyleVariableValue(100);
+    // 判断数据加载后是否展开树形表格
+    if (this.table.store.expand) {
+      if (this.props.treeLazyLoad) {
+        this.table.store.alreadyLoadAllData = true;
+        this.table.store.loading = true;
+        const datas = await this.tools?.reqApiFM.treeFetchDataByForeignKey();
+        this.tools?.apiFM.localMode.setLocalData(datas);
+        this.table.store.loading = false;
+        this.tools?.apiFM.operator.expand(undefined, true);
+      } else {
+        this.tools?.apiFM.operator.expand();
+      }
+    } else if (this.props.tree && this.props.treeLazyLoad && this.table.store.expandDatas.length > 0) {
+      for (let i = 0; i < this.table.store.expandDatas.length; i++) {
+        const primaryKey = this.table.store.expandDatas[i];
+        if (!this.table.store.lazyloadNoChildrenDatas.includes(primaryKey)) {
+          const childrenData = await this.tools?.reqApiFM.treeFetchDataByForeignKey(primaryKey);
+          if (childrenData.length > 0) {
+            this.tools?.apiFM.localMode.addLocalData(childrenData);
+          } else {
+            const row = this.tools?.dataFM.getRow(this.table.rows, primaryKey, false);
+            if (row) {
+              row[Constant.FIELD_NAMES.LAZYLOAD_NO_CHILDREN] = true;
+            }
+          }
+        } else {
+          const row = this.tools?.dataFM.getRow(this.table.rows, primaryKey, false);
+          if (row) {
+            row[Constant.FIELD_NAMES.LAZYLOAD_NO_CHILDREN] = true;
+          }
+        }
+      }
+    }
+    // 触发请求完成后事件
+    this.tools?.em.afterRequestData(toRaw(this.table.rows));
+  }
+
+  /**
+   * 树表格根据关系字段查询
+   * @param primaryKey 加载哪个主键下面的子节点，不传入加载所有
+   */
+  async treeFetchDataByForeignKey(primaryKey?: string) {
+    const url = this.getFetchUrl();
+    const urlSearchParams = new URLSearchParams({ pageable: false });
+    if (primaryKey) {
+      const criteria = {
+        fieldName: this.props.foreignKey,
+        operator: Constant.CRITERIA_OPERATOR.equals,
+        value: primaryKey,
+      };
+      urlSearchParams.append('criteria', JSON.stringify(criteria));
+    }
+    const resp = await axios.get(url, { params: urlSearchParams }).catch((error) => {
+      console.error('[w-grid]fetch data error：', error);
+      this.table.store.loading = false;
+    });
+    let resultData: any = [];
+    if (resp && resp.data) {
+      const responseData = resp.data;
+      if (Array.isArray(responseData)) {
+        resultData = responseData;
+      } else if (typeof responseData === 'object' && responseData.content) {
+        resultData = responseData.content;
+      }
+    }
+    return resultData;
+  }
+
+  /**
+   * 新增、修改、复制、新增顶级节点、新增子节点保存数据
+   * @param method 请求方式
+   * @param data 数据
+   * @param url url
+   * @param formRef form对象
+   * @param callback 请求成功回调
+   * @param errorCallback 请求错误回调
+   */
+  save(method: string, data: any, url: string, formRef: any, callback: any, errorCallback: any) {
+    const requestParams = {
+      method: method,
+      headers: { 'content-type': 'application/json;charset=utf-8;' },
+      data: data,
+      url: url,
+    };
+    noErrorAxios(requestParams)
+      .then((resp) => {
+        if (callback) {
+          callback(resp);
+        }
+        NotifyManager.info($t('tip.operationSuccess') || '');
+        this.tools?.em.afterEditorDataSubmit({ grid: this.instance, data: resp.data });
+      })
+      .catch((error) => {
+        if (error?.code === 1001) {
+          // 验证错误
+          formRef?.setValidationErrors(error.data);
+        } else {
+          ServerExceptionHandler.handle(error);
+        }
+        if (errorCallback) {
+          errorCallback(error);
+        }
+      });
+  }
+
+  /**
+   * 批量更新数据
+   * @param data 数据集合
+   * @param callback 回调函数
+   */
+  updates(data: Array<any>, callback: any = undefined) {
+    const requestParams = {
+      method: 'PUT',
+      headers: { 'content-type': 'application/json;charset=utf-8;' },
+      data: data,
+      url: this.table?.url.dataUrl + '/updates',
+    };
+    noErrorAxios(requestParams)
+      .then((resp) => {
+        if (!Tools.isEmpty(callback)) {
+          callback(resp?.data);
+        }
+      })
+      .catch((error) => {
+        if (error?.code === 1001) {
+          // 验证错误
+          NotifyManager.error('服务器验证未通过');
+        } else {
+          ServerExceptionHandler.handle(error);
+        }
+      });
+  }
+
+  /**
+   * 删除数据
+   * @param ids 删除的主键集合
+   */
+  remove(ids: Array<any>) {
+    const requestParams: any = {
+      method: 'DELETE',
+      url: this.table.url.removeDataUrl || this.table.url.dataUrl,
+      data: ids,
+    };
+    axios(requestParams)
+      .then((resp) => {
+        // 触发请求完成后事件
+        this.tools?.em.afterRemove(resp?.data);
+        NotifyManager.info($t('tip.operationSuccess') || '');
+        if (this.props.refreshData || !this.props.tree) {
+          this.tools?.apiFM.operator.refreshGrid();
+        } else {
+          this.tools?.apiFM.localMode.removeLocalData(resp?.data);
+        }
+      })
+      .catch((error) => {
+        console.error('[w-grid]Remove error：', error);
+      });
+  }
+
+  private async requestHandle(ops: any) {
+    const reqParams: any = {};
+    if (this.props.pageable && !this.props.tree && !this.props.localMode) {
+      reqParams.page = ops.pagination.page;
+      reqParams.size = ops.pagination.rowsPerPage;
+    }
+    reqParams.pageable = this.props.tree || this.props.localMode ? false : this.props.pageable;
+    if (ops.pagination.sortBy && ops.pagination.sortBy !== '') {
+      if (ops.pagination.descending) {
+        reqParams.sortBy = '-' + ops.pagination.sortBy;
+        reqParams.descending = ops.pagination.descending;
+      } else {
+        reqParams.sortBy = ops.pagination.sortBy;
+      }
+    } else if (this.props.sortBy && this.props.sortBy.length > 0) {
+      reqParams.sortBy = this.props.sortBy;
+    }
+
+    // 后台 RestCrudController 查询
+    let urlSearchParams = this.tools?.criteriaFM.buildURLSearchParams(reqParams);
+
+    // 请求前事件触发
+    const _requestParams = await this.tools?.em.beforeRequestData(urlSearchParams);
+    if (_requestParams) {
+      urlSearchParams = _requestParams;
+    }
+    const url = this.getFetchUrl();
+
+    // 树型表格懒加载
+    if (this.props.tree && this.props.treeLazyLoad && urlSearchParams) {
+      const criteria = {
+        fieldName: this.props.foreignKey,
+        operator: Constant.CRITERIA_OPERATOR.isNull,
+      };
+      urlSearchParams.append('criteria', JSON.stringify(criteria));
+    }
+    const resp = await axios.get(url, { params: urlSearchParams }).catch((error) => {
+      console.error('[w-grid]fetch data error：', error);
+      this.table.store.loading = false;
+    });
+    return resp;
+  }
+
+  private responseHandle(resp: any, ops: any) {
+    if (resp && resp.data) {
+      if (!this.table.store.expand) {
+        // 记录当前已展开记录
+        this.setExpandDatas();
+      }
+      const responseData = resp.data;
+      if (Array.isArray(responseData)) {
+        this.table.rows = responseData;
+        this.table.store.pagination.rowsNumber = responseData.length;
+      } else if (typeof responseData === 'object' && responseData.content) {
+        if (this.props.pageable) {
+          this.table.store.pagination.page = this.table.store.pagination.reqPageStart === 0 ? responseData.number + 1 : responseData.number;
+          this.table.store.pagination.rowsPerPage = responseData.size || this.table.store.pagination.rowsPerPage;
+        }
+        this.table.store.pagination.rowsNumber = responseData.totalElements;
+        this.table.rows = responseData.content;
+      } else {
+        this.table.rows = [];
+      }
+
+      if (this.props.tree) {
+        if (Array.isArray(responseData)) {
+          this.table.store.pagination.rowsNumber = responseData.length;
+          this.table.store.pagination.rowsPerPage = 0;
+          this.table.rows =
+            this.props.treeRelationship === 'parent' ? TreeBuilder.build(responseData, this.props.foreignKey, this.props.primaryKey) : responseData;
+        } else if (typeof responseData === 'object' && responseData.content) {
+          this.table.store.pagination.rowsNumber = responseData.content.length;
+          this.table.store.pagination.rowsPerPage = 0;
+          this.table.rows =
+            this.props.treeRelationship === 'parent'
+              ? TreeBuilder.build(responseData.content, this.props.foreignKey, this.props.primaryKey)
+              : responseData.content;
+        }
+      }
+    } else {
+      this.table.rows = [];
+    }
+    this.table.store.pagination.sortBy = ops.pagination.sortBy;
+    this.table.store.pagination.descending = ops.pagination.descending;
+  }
+
+  /**
+   * 设置 store 中记录的当前已展开记录
+   * @param
+   */
+  private setExpandDatas() {
+    if (this.props.tree) {
+      this.table.store.expandDatas = [];
+      this.table.store.lazyloadNoChildrenDatas = [];
+      this.setTreeExpandDatas(toRaw(this.table.rows));
+    } else if (this.props.groupMode === Constant.GROUP_MODE.ALONE) {
+      this.setAlongGroupExpandDatas();
+    }
+  }
+
+  private setTreeExpandDatas(array: Array<any>) {
+    array.forEach((item) => {
+      if (item[Constant.FIELD_NAMES.EXPAND]) {
+        if (this.props.treeLazyLoad) {
+          const parents = this.tools?.apiFM.getData.getCascadeParentsData(item, null);
+          if (parents.length === 0 || parents.findIndex((parent) => !parent[Constant.FIELD_NAMES.EXPAND]) === -1) {
+            this.table.store.expandDatas.push(item[this.props.primaryKey]);
+          }
+        } else {
+          this.table.store.expandDatas.push(item[this.props.primaryKey]);
+        }
+      }
+      if (item[Constant.FIELD_NAMES.LAZYLOAD_NO_CHILDREN] && (!item.children || item.children.length === 0)) {
+        this.table.store.lazyloadNoChildrenDatas.push(item[this.props.primaryKey]);
+      }
+      if (item.children?.length > 0) {
+        this.setTreeExpandDatas(item.children);
+      }
+    });
+  }
+
+  private setAlongGroupExpandDatas() {
+    this.table.configStore.aloneGroupRecords.forEach((item) => {
+      if (item['expand'] && !this.table.store.expandDatas.includes(item['groupName'])) {
+        this.table.store.expandDatas.push(item['groupName']);
+      } else if (!item['expand']) {
+        const index = this.table.store.expandDatas.findIndex((tmp) => tmp === item['groupName']);
+        if (index > -1) {
+          this.table.store.expandDatas.splice(index, 1);
+        }
+      }
+    });
+  }
+
+  private getFetchUrl() {
+    return this.table?.url.fetchDataUrl || this.table?.url.dataUrl || '';
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RowData.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RowData.ts
new file mode 100644
index 00000000..26956663
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RowData.ts
@@ -0,0 +1,440 @@
+import { toRaw } from 'vue';
+import sortArray from 'sort-array';
+import { Tools } from '@/platform';
+import { Base } from '../Base';
+import { Constant, GridTools, PropsType, TableType } from '../index';
+
+/**
+ * 行数据相关处理函数
+ */
+export class RowData extends Base {
+  private aloneGroupRowIndex: number = 0;
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.getRow = this.getRow.bind(this);
+    this.getRowsByTarget = this.getRowsByTarget.bind(this);
+    this.isSelectedRow = this.isSelectedRow.bind(this);
+    this.isSelectedCell = this.isSelectedCell.bind(this);
+    this.setOldValue = this.setOldValue.bind(this);
+    this.isLastRow = this.isLastRow.bind(this);
+    this.checkLastRow = this.checkLastRow.bind(this);
+    this.setExtraProperty = this.setExtraProperty.bind(this);
+    this.arrayOrderBy = this.arrayOrderBy.bind(this);
+    this.mergeSortFields = this.mergeSortFields.bind(this);
+    this.mergeDefaultSortBy = this.mergeDefaultSortBy.bind(this);
+    this.rowDataExtraPropertyHandle = this.rowDataExtraPropertyHandle.bind(this);
+    this.mergeGroupBy = this.mergeGroupBy.bind(this);
+    this.aloneGroupBy = this.aloneGroupBy.bind(this);
+    this.setRowIndex = this.setRowIndex.bind(this);
+    this.initRowDataExtraProperty = this.initRowDataExtraProperty.bind(this);
+    this.getInitRowTicked = this.getInitRowTicked.bind(this);
+    this.getInitRowSelected = this.getInitRowSelected.bind(this);
+    this.pushRow = this.pushRow.bind(this);
+    this.rowsKeyIsEmptyError = this.rowsKeyIsEmptyError.bind(this);
+    this.rowsKeyNotExistError = this.rowsKeyNotExistError.bind(this);
+  }
+
+  /**
+   * 从传入的行记录集合中查找符合条件的行数据（树型表格也适用）
+   * @param array 集合。
+   * @param key 行数据主键或行数据前端主键。
+   * @param parentFlag key为父ID标识，当key为父ID时，通过行数据主键进行匹配，否则根据传入的 fieldName 进行匹配。
+   * @param fieldName 字段名称，默认为行数据前端主键名。
+   * @returns
+   */
+  public getRow(array: Array<any>, key: string, parentFlag: boolean, fieldName: string = Constant.FIELD_NAMES.ROW_KEY): any {
+    let result = undefined;
+    for (let i = 0; i < array.length; i++) {
+      const item = array[i];
+      if (parentFlag ? item[this.props.primaryKey] === key : item[fieldName] === key || item[this.props.primaryKey] === key) {
+        result = item;
+        break;
+      } else if (this.props.tree && item.children && item.children.length > 0) {
+        const temp = this.getRow(item.children, key, parentFlag);
+        if (temp) {
+          result = temp;
+        }
+      }
+    }
+    return result;
+  }
+
+  /**
+   * 根据传入的数据集合及目标对象查找表格行记录
+   * @param rows 表格数据集合
+   * @param target 目标对象，可以是行对象、行对象数组、行主键、前端主键。
+   * @returns 行数据数组集合
+   */
+  public getRowsByTarget(rows: Array<any>, target: any) {
+    const result = [];
+    if (target && Array.isArray(target) && target.length > 0) {
+      target.forEach((item) => {
+        this.rowsKeyIsEmptyError(item);
+        this.pushRow(rows, result, item);
+      });
+    } else if (!Tools.isEmpty(target)) {
+      this.pushRow(rows, result, target);
+    }
+    return result;
+  }
+
+  /**
+   * 判定传入的主键是否处于行选中状态
+   * @param rowKey 前端主键
+   */
+  public isSelectedRow(rowKey: string) {
+    if (this.table && !Tools.isEmpty(rowKey)) {
+      const selected = this.tools?.apiFM.getData.getSelectedRow();
+      if (selected) {
+        return rowKey === selected[Constant.FIELD_NAMES.ROW_KEY];
+      }
+    }
+    return false;
+  }
+
+  /**
+   * 判定传入的行主键及列名是否处于单元格选中状态
+   * @param rowKey 前端主键
+   * @param colName 列名
+   */
+  public isSelectedCell(rowKey: string, colName: string) {
+    if (this.table && !Tools.isEmpty(rowKey) && !Tools.isEmpty(colName)) {
+      const selected = this.tools?.apiFM.getData.getSelectedCell();
+      if (selected?.colName && rowKey === selected['row'][Constant.FIELD_NAMES.ROW_KEY] && colName === selected.colName) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * 设置内联编辑修改前的行数据值
+   * @param row 行数据
+   */
+  public setOldValue(row) {
+    const values = Object.values(Constant.FIELD_NAMES.getExtraFields(this.props));
+    Object.keys(row).forEach((key) => {
+      if (
+        values.findIndex((item) => {
+          return item === key;
+        }) < 0
+      ) {
+        row[Constant.FIELD_NAMES.ROW_OLD_VALUE][key] = toRaw(row[key]);
+      }
+    });
+  }
+
+  /**
+   * 设置表格附加属性及分组处理
+   * @param rows
+   * @returns
+   */
+  public async setExtraProperty(rows: Array<any>, ops?: any, lazyloadNoChildren: boolean = false) {
+    // 清空分组记录
+    this.table.configStore.aloneGroupRecords = [];
+    // 重置分组行下标
+    this.aloneGroupRowIndex = 0;
+    if (this.props.groupMode === Constant.GROUP_MODE.MERGE && !this.props.tree) {
+      // 如果存在需要合并的字段，并且不是树表格，重新对数据进行排序
+      this.table.store.mergeGroupRecords = {};
+      const groupByFields = this.tools?.cm.mergeGroupByField.value;
+      this.arrayOrderBy(rows, groupByFields, ops);
+    }
+    this.rowDataExtraPropertyHandle(rows, lazyloadNoChildren);
+  }
+
+  /**
+   * 判断传入的行是否为数据的最后一行
+   * @param row 校验的行
+   */
+  isLastRow(row: any) {
+    if (this.tools?.table?.rows?.length === 0) {
+      return true;
+    }
+    const lastRow = this.tools?.table.rows[this.tools.table.rows.length - 1];
+    return this.checkLastRow(lastRow, row);
+  }
+
+  private checkLastRow(lastRow: any, row: any) {
+    if (this.tools?.props.tree && row[Constant.FIELD_NAMES.EXPAND] && !Tools.isEmpty(row.children) && row.children.length > 0) {
+      const childrenLastRow = row.children[row.children.length - 1];
+      if (childrenLastRow[Constant.FIELD_NAMES.EXPAND] && !Tools.isEmpty(childrenLastRow.children) && childrenLastRow.children.length > 0) {
+        return this.checkLastRow(lastRow, childrenLastRow);
+      } else {
+        return childrenLastRow[Constant.FIELD_NAMES.ROW_KEY] === row[Constant.FIELD_NAMES.ROW_KEY];
+      }
+    } else {
+      return lastRow[Constant.FIELD_NAMES.ROW_KEY] === row[Constant.FIELD_NAMES.ROW_KEY];
+    }
+  }
+
+  /**
+   * 对象数组根据依次根据属性名进行排序
+   * @param array 对象数组
+   * @param sortFields 属性名
+   */
+  private arrayOrderBy(array: Array<any>, sortFields: any, ops: any) {
+    let fields = [...sortFields];
+    // 将分组字段与排序字段进行合并
+    fields = this.mergeSortFields(fields, ops);
+    const customOrders = {};
+    // 对每一个字段进行排序
+    for (const field of fields) {
+      const desc = field.startsWith('-');
+      const _field = desc ? field.substring(1) : field;
+      const fieldSortArr = array.map((item) => item[_field]);
+      sortArray(fieldSortArr, { order: desc ? 'desc' : 'asc' });
+      customOrders[_field] = fieldSortArr;
+    }
+    const byFields = fields.map((item) => (item.startsWith('-') ? item.substring(1) : item));
+    sortArray(array, {
+      by: byFields,
+      order: byFields,
+      customOrders: customOrders,
+    });
+  }
+
+  private mergeSortFields(fields: Array<any>, ops: any) {
+    const sortBy = ops?.pagination?.sortBy;
+    if (sortBy) {
+      const prefix = ops.pagination.descending ? '-' : '';
+      if (fields.findIndex((tmp) => tmp === sortBy) === -1) {
+        fields.push(prefix + sortBy);
+      } else {
+        fields = fields.map((tmp) => {
+          if (tmp === sortBy) {
+            return prefix + sortBy;
+          }
+          return tmp;
+        });
+      }
+      return fields;
+    } else {
+      return this.mergeDefaultSortBy(fields);
+    }
+  }
+
+  private mergeDefaultSortBy(fields: Array<any>) {
+    if (Array.isArray(this.tools?.props.sortBy) && this.tools?.props.sortBy.length > 0) {
+      this.tools.props.sortBy.forEach((item) => {
+        if (item.startsWith('-')) {
+          if (fields.findIndex((tmp) => tmp === item.substring(1)) === -1) {
+            fields.push(item);
+          } else {
+            fields = fields.map((tmp) => {
+              if (tmp === item.substring(1)) {
+                return item;
+              }
+              return tmp;
+            });
+          }
+        } else {
+          if (fields.findIndex((tmp) => tmp === item) === -1) {
+            fields.push(item);
+          }
+        }
+      });
+    }
+    return fields;
+  }
+
+  private rowDataExtraPropertyHandle(rows: Array<any>, lazyloadNoChildren: boolean = false) {
+    if (rows && rows.length > 0) {
+      rows.forEach((item: any, index) => {
+        this.initRowDataExtraProperty(item, lazyloadNoChildren);
+        this.mergeGroupBy(item);
+        this.aloneGroupBy(item);
+        if (item[this.props.tickedField] === true) {
+          item[Constant.FIELD_NAMES.TICKED_COUNT] = 1;
+        } else if (item[Constant.FIELD_NAMES.TICKED_COUNT] === false) {
+          item[Constant.FIELD_NAMES.TICKED_COUNT] = 0;
+        } else {
+          item[Constant.FIELD_NAMES.TICKED_COUNT] = 0;
+        }
+        if (this.props.tree && item.children && item.children.length > 0) {
+          this.rowDataExtraPropertyHandle(item.children, lazyloadNoChildren);
+          item[Constant.FIELD_NAMES.CHILDREN_TICKED_COUNT] = 0;
+          item.children.forEach((child) => {
+            item[Constant.FIELD_NAMES.CHILDREN_TICKED_COUNT] += child[Constant.FIELD_NAMES.TICKED_COUNT];
+          });
+          if (item[Constant.FIELD_NAMES.CHILDREN_TICKED_COUNT] === 0) {
+            item[this.props.tickedField] = false;
+            item[Constant.FIELD_NAMES.TICKED_COUNT] = 0;
+          } else if (item[Constant.FIELD_NAMES.CHILDREN_TICKED_COUNT] === item.children.length) {
+            item[this.props.tickedField] = true;
+            item[Constant.FIELD_NAMES.TICKED_COUNT] = 1;
+          } else {
+            item[this.props.tickedField] = null;
+            item[Constant.FIELD_NAMES.TICKED_COUNT] = 0;
+          }
+        }
+      });
+    }
+  }
+
+  /**
+   * 合并模式分组
+   * @param rowData
+   */
+  private mergeGroupBy(rowData: any) {
+    if (this.props.groupMode === Constant.GROUP_MODE.MERGE && !this.props.tree) {
+      const groupByFields = this.tools?.cm.mergeGroupByField.value;
+      if (groupByFields && Array.isArray(groupByFields)) {
+        groupByFields.forEach((columnName: any) => {
+          const tmpArr = [rowData[Constant.FIELD_NAMES.ROW_KEY]];
+          if (this.table.store.mergeGroupRecords[columnName]) {
+            if (this.table.store.mergeGroupRecords[columnName][rowData[columnName]]) {
+              this.table.store.mergeGroupRecords[columnName][rowData[columnName]].push(rowData[Constant.FIELD_NAMES.ROW_KEY]);
+            } else {
+              this.table.store.mergeGroupRecords[columnName][rowData[columnName]] = tmpArr;
+            }
+          } else {
+            this.table.store.mergeGroupRecords[columnName] = { [rowData[columnName]]: tmpArr };
+          }
+        });
+      }
+    }
+  }
+
+  /**
+   * 单独模式分组
+   */
+  private aloneGroupBy(rowData: any) {
+    if (this.props.groupMode === Constant.GROUP_MODE.ALONE) {
+      const groupByField = this.tools?.table.configStore.aloneGroupByField;
+      if (groupByField) {
+        const expand = this.getAloneGroupDefaultExpand(rowData, groupByField);
+        const findResult = this.table.configStore.aloneGroupRecords.find((tmp) => tmp['groupName'] === rowData[groupByField]);
+        if (!findResult) {
+          this.table.configStore.aloneGroupRecords.push({ groupName: rowData[groupByField], expand: expand, rows: [rowData] });
+        } else {
+          findResult.rows.push(rowData);
+        }
+        this.setRowIndex(rowData);
+      }
+    }
+  }
+
+  /**
+   * 获得独立分组默认展开状态
+   * @param rowData
+   * @param groupByField
+   * @returns
+   */
+  private getAloneGroupDefaultExpand(rowData: any, groupByField: string) {
+    let expand = false;
+    if (typeof this.props.groupStartOpen === 'string' && this.props.groupStartOpen === Constant.GROUP_START_OPEN.ALL) {
+      expand = true;
+    } else if (
+      typeof this.props.groupStartOpen === 'string' &&
+      this.props.groupStartOpen === Constant.GROUP_START_OPEN.FIRST &&
+      this.aloneGroupRowIndex === 0
+    ) {
+      expand = true;
+    } else if (Array.isArray(this.props.groupStartOpen) && this.props.groupStartOpen.includes(rowData[groupByField])) {
+      expand = true;
+    } else if (typeof this.props.groupStartOpen === 'function') {
+      expand = this.props.groupStartOpen({
+        groupByField: rowData[groupByField],
+        row: rowData,
+      });
+    }
+    // 当前展开记录中已经有，强制改为展开状态
+    if (this.table.store.expandDatas.length > 0 && this.table.store.expandDatas.includes(rowData[groupByField])) {
+      expand = true;
+    }
+    return expand;
+  }
+
+  /**
+   * 设置行下标
+   * @param rowData
+   */
+  private setRowIndex(rowData: any) {
+    rowData[Constant.FIELD_NAMES.ROW_INDEX] = this.aloneGroupRowIndex;
+    this.aloneGroupRowIndex++;
+  }
+
+  /**
+   * 初始化行数据附加属性
+   * @param rowData 行数据对象
+   */
+  private async initRowDataExtraProperty(rowData: any, lazyloadNoChildren: boolean = false) {
+    rowData[Constant.FIELD_NAMES.ROW_KEY] = Tools.uuid();
+    rowData[this.props.tickedField] = this.getInitRowTicked(rowData);
+    rowData[this.props.selectedField] = this.getInitRowSelected(rowData);
+    rowData[Constant.FIELD_NAMES.ROW_OLD_VALUE] = {};
+    this.setOldValue(rowData);
+    if (this.props.tree) {
+      if (this.table.store.expandDatas.length > 0 && this.table.store.expandDatas.includes(rowData[this.props.primaryKey])) {
+        rowData[Constant.FIELD_NAMES.EXPAND] = true;
+      } else if (Tools.isEmpty(rowData[Constant.FIELD_NAMES.EXPAND])) {
+        rowData[Constant.FIELD_NAMES.EXPAND] = false;
+      }
+      if (lazyloadNoChildren && (!rowData.children || rowData.children.length === 0)) {
+        rowData[Constant.FIELD_NAMES.LAZYLOAD_NO_CHILDREN] = true;
+      }
+    }
+  }
+
+  /**
+   * 获取初始化行的ticked状态
+   * @param rowData
+   * @returns
+   */
+  private getInitRowTicked(rowData: any) {
+    if (rowData[this.props.tickedField]) {
+      return true;
+    } else if (Object.keys(this.props.tickedRecord).length > 0 && this.props.tickedRecord['data']?.length > 0) {
+      const columnName = this.props.tickedRecord['columnName'] || this.props.primaryKey;
+      const data = this.props.tickedRecord['data'];
+      if (
+        data.findIndex((item) => {
+          return item === rowData[columnName];
+        }) > -1
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * 获取初始化行的selected状态
+   * @param rowData
+   * @returns
+   */
+  private getInitRowSelected(rowData: any) {
+    if (rowData[this.props.selectedField]) {
+      return true;
+    } else if (!this.props.tree && rowData[this.props.tickedField]) {
+      return true;
+    } else if (this.props.tree && !this.props.checkboxSelection && rowData[this.props.tickedField]) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  private pushRow(rows: Array<any>, result: Array<any>, item: any) {
+    const row = this.getRow(
+      rows,
+      typeof item === 'object' ? item[this.props.primaryKey] || item[Constant.FIELD_NAMES.ROW_KEY] : item,
+      false,
+      item[this.props.primaryKey] ? this.props.primaryKey : Constant.FIELD_NAMES.ROW_KEY,
+    );
+    if (row) {
+      result.push(row);
+    } else {
+      this.rowsKeyNotExistError(typeof item === 'object' ? item[this.props.primaryKey] || item[Constant.FIELD_NAMES.ROW_KEY] : item);
+    }
+  }
+  private rowsKeyIsEmptyError(data: any) {
+    if (typeof data === 'object' && Tools.isEmpty(data[this.props.primaryKey]) && Tools.isEmpty(data[Constant.FIELD_NAMES.ROW_KEY])) {
+      throw new Error('[w-grid]Data does not contain `primaryKey` or `rowKey`.');
+    }
+  }
+  private rowsKeyNotExistError(data: any) {
+    throw new Error('[w-grid]`' + data + '` Not Found in Data Row.');
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/grid.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/grid.ts
deleted file mode 100644
index 85e8944d..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/grid.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Tools, t } from '@/platform';
-
-// 拖拽排序模式
-export const dndMode = {
-  local: 'local', // 本地排序
-  server: 'server', // 服务端排序
-};
-export const dndImage = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E`;
-
-// 选择模式
-export const selectMode = {
-  none: 'none', // 不允许选择
-  row: 'row', // 行选择
-  cell: 'cell', // 单元格选择
-};
-
-// 分组模式
-export const groupMode = {
-  alone: 'alone', // 单独行进行分组
-  merge: 'merge', // 合并行进行分组
-};
-
-// 表格内容区域快速编辑状态
-export const editStatus = {
-  none: 'none', // 不在编辑状态
-  cell: 'cellEdit', // 单元格编辑状态
-  row: 'rowEdit', // 行编辑状态
-  rows: 'rowsEdit', // 所有行编辑状态
-};
-
-// 内置编辑窗口中form的状态
-export const formStatus = {
-  add: 'add', // 新增
-  edit: 'edit', // 编辑
-  clone: 'clone', // 复制
-  addTop: 'addTop', // 新增顶级节点
-  addChild: 'addChild', // 新增子节点
-};
-
-// 列样式处理
-const columnStyle = (item: any) => {
-  let style = '';
-  if (Tools.hasOwnProperty(item, 'style')) {
-    style = item.style;
-  }
-  if (Tools.hasOwnProperty(item, 'width')) {
-    if (typeof item.width === 'number') {
-      item.style = `min-width: ` + item.width + `px; width: ` + item.width + `px;max-width: ` + item.width + `px;` + style;
-    } else {
-      item.style = `min-width: ` + item.width + `; width: ` + item.width + `;max-width: ` + item.width + `;` + style;
-    }
-    delete item.width;
-
-    if (Tools.hasOwnProperty(item, 'classes')) {
-      item.classes = item.classes + ' truncate';
-    } else {
-      item.classes = 'truncate';
-    }
-  }
-};
-
-// 孩子列处理
-const childrenHandler = (item: any, gridColumns: any) => {
-  if (item.columns && item.columns.length > 0) {
-    item.columns.forEach((column) => {
-      childrenHandler(column, gridColumns);
-    });
-  } else {
-    columnStyle(item);
-    const col = {
-      ...{ align: 'left', label: item.name, field: item.name, name: item.name, sortable: true, showIf: true },
-      ...item,
-    };
-    if (Tools.isEmpty(col.name)) {
-      col.name = Tools.uuid();
-    }
-    gridColumns.push(col);
-  }
-};
-
-// 列的默认属性
-export const columnDefaultProps = (columns: any, sortNo: boolean) => {
-  const gridColumns = <any>[];
-  if (columns && columns.length > 0) {
-    gridColumns.push({ name: '_sortNo_', align: 'center', label: t('rownum'), field: '_sortNo_', showIf: sortNo });
-    columns.forEach((item: any) => {
-      childrenHandler(item, gridColumns);
-    });
-    return gridColumns;
-  }
-  return [];
-};
-
-export const sortByProperties = (arr, properties) => {
-  for (const prop of properties) {
-    arr.sort((a, b) => {
-      if (a[prop] < b[prop]) {
-        return -1;
-      } else if (a[prop] > b[prop]) {
-        return 1;
-      }
-      return 0;
-    });
-  }
-};
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/index.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/index.ts
new file mode 100644
index 00000000..b7d03ee4
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/index.ts
@@ -0,0 +1,14 @@
+import { Constant } from './constant/Constant';
+
+import { EventManager } from './event/EventManager';
+import { ExposeApiManager } from './expose-api/ExposeApiManager';
+import { Init } from './Init';
+
+import type { TableType } from './types/TableType';
+import type { EventType } from './types/EventType';
+import type { PropsType } from './types/PropsType';
+import type { UrlType } from './types/table/UrlType';
+
+import { GridTools } from './GridTools';
+
+export { Constant, EventManager, ExposeApiManager, Init, EventType, PropsType, UrlType, TableType, GridTools };
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/Button.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/Button.ts
new file mode 100644
index 00000000..09873cbb
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/Button.ts
@@ -0,0 +1,55 @@
+import { Tools } from '@/platform';
+import { Loading } from 'quasar';
+import { nextTick } from 'vue';
+import { Base } from '../Base';
+/**
+ * w-grid 内置按钮超类
+ */
+export abstract class Button extends Base {
+  /**
+   * 按钮名称
+   */
+  abstract name: string;
+
+  /**
+   * 获取按钮配置到toolbar中的配置属性
+   */
+  abstract getButtonConfig(args: any): object | string;
+
+  /**
+   * 打开editor窗口
+   * @param grid 表格实例对象
+   * @param title 窗口标题
+   * @param status 窗口中Form的状态
+   * @param data 编辑的数据，新增为 undefined
+   */
+  openEditor(grid: any, title: string, status: string, data: any) {
+    grid.getEditorDialog().show();
+    nextTick(() => {
+      grid.getEditorDialog().setTitle(title);
+      grid.getEditorForm().setStatus(status);
+      if (!Tools.isEmpty(data)) {
+        grid.getEditorForm().setData(data);
+      }
+    });
+  }
+
+  /**
+   * 显示处理中/加载中遮罩
+   * @param msg
+   */
+  showLoading(msg: string = '正在处理，请稍等...') {
+    Loading.show({
+      message: msg,
+      boxClass: 'bg-grey-2 text-grey-9',
+      spinnerColor: 'primary',
+    });
+  }
+
+  /**
+   * 隐藏处理中/加载中遮罩
+   */
+  hideLoading() {
+    Loading.hide();
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/ButtonManager.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/ButtonManager.ts
new file mode 100644
index 00000000..67f5884f
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/ButtonManager.ts
@@ -0,0 +1,227 @@
+import { Tools } from '@/platform';
+import { GridTools } from '../GridTools';
+import { PropsType } from '../types/PropsType';
+
+import { TableType } from '../types/TableType';
+import { Add } from './buttons/Add';
+import { AddChild } from './buttons/AddChild';
+import { AddTop } from './buttons/AddTop';
+import { CellEdit } from './buttons/CellEdit';
+import { Clone } from './buttons/Clone';
+import { Edit } from './buttons/Edit';
+import { Expand } from './buttons/Expand';
+import { Export } from './buttons/Export';
+import { InlineCellEdit } from './buttons/InlineCellEdit';
+import { InlineRowEdit } from './buttons/InlineRowEdit';
+import { InlineRowsEdit } from './buttons/InlineRowsEdit';
+import { MoreQuery } from './buttons/MoreQuery';
+import { Query } from './buttons/Query';
+import { AdvancedQuery } from './buttons/AdvancedQuery';
+import { Refresh } from './buttons/Refresh';
+import { Remove } from './buttons/Remove';
+import { Reset } from './buttons/Reset';
+import { ResetDefaultValues } from './buttons/ResetDefaultValues';
+import { Separator } from './buttons/Separator';
+import { View } from './buttons/view';
+import { FullScreen } from './buttons/FullScreen';
+
+/**
+ * w-grid 内置按钮管理器
+ */
+export class ButtonManager {
+  // 查询
+  query: Query;
+  moreQuery: MoreQuery;
+  advancedQuery: AdvancedQuery;
+  reset: Reset;
+  refresh: Refresh;
+
+  // 新增
+  add: Add;
+  addTop: AddTop;
+  addChild: AddChild;
+
+  // 编辑
+  edit: Edit;
+  cellEdit: CellEdit;
+  inlineCellEdit: InlineCellEdit;
+  inlineRowEdit: InlineRowEdit;
+  inlineRowsEdit: InlineRowsEdit;
+  clone: Clone;
+
+  // 删除
+  remove: Remove;
+
+  // 其他
+  fullScreen: FullScreen;
+  separator: Separator;
+  view: View;
+  export: Export;
+  expand: Expand;
+  resetDefaultValues: ResetDefaultValues;
+
+  constructor(props: PropsType, table: TableType) {
+    this.query = new Query(props, table);
+    this.moreQuery = new MoreQuery(props, table);
+    this.advancedQuery = new AdvancedQuery(props, table);
+    this.reset = new Reset(props, table);
+    this.refresh = new Refresh(props, table);
+
+    this.add = new Add(props, table);
+    this.addTop = new AddTop(props, table);
+    this.addChild = new AddChild(props, table);
+
+    this.edit = new Edit(props, table);
+    this.cellEdit = new CellEdit(props, table);
+    this.inlineCellEdit = new InlineCellEdit(props, table);
+    this.inlineRowEdit = new InlineRowEdit(props, table);
+    this.inlineRowsEdit = new InlineRowsEdit(props, table);
+    this.clone = new Clone(props, table);
+
+    this.remove = new Remove(props, table);
+
+    this.fullScreen = new FullScreen(props, table);
+    this.separator = new Separator(props, table);
+    this.view = new View(props, table);
+    this.export = new Export(props, table);
+    this.expand = new Expand(props, table);
+    this.resetDefaultValues = new ResetDefaultValues(props, table);
+  }
+
+  /**
+   * 获取按钮配置
+   * @param name 按钮名称，不传入则以`{ 按钮名称：按钮配置 }`对象的形式返回所有按钮配置。
+   * @returns
+   */
+  getButtonConfig(name?: string) {
+    let config = {};
+    if (Tools.isEmpty(name)) {
+      config = {
+        [this.query.name]: this.query.getButtonConfig(),
+        [this.moreQuery.name]: this.moreQuery.getButtonConfig(),
+        [this.advancedQuery.name]: this.advancedQuery.getButtonConfig(),
+        [this.reset.name]: this.reset.getButtonConfig(),
+        [this.refresh.name]: this.refresh.getButtonConfig(),
+
+        [this.add.name]: this.add.getButtonConfig(),
+        [this.addTop.name]: this.addTop.getButtonConfig(),
+        [this.addChild.name]: this.addChild.getButtonConfig(),
+
+        [this.edit.name]: this.edit.getButtonConfig(),
+        [this.cellEdit.name]: this.cellEdit.getButtonConfig(),
+        [this.inlineCellEdit.name]: this.inlineCellEdit.getButtonConfig(),
+        [this.inlineRowEdit.name]: this.inlineRowEdit.getButtonConfig(),
+        [this.inlineRowsEdit.name]: this.inlineRowsEdit.getButtonConfig(),
+        [this.clone.name]: this.clone.getButtonConfig(),
+
+        [this.remove.name]: this.remove.getButtonConfig(),
+
+        [this.fullScreen.name]: this.fullScreen.getButtonConfig(),
+        [this.separator.name]: this.separator.getButtonConfig(),
+        [this.view.name]: this.view.getButtonConfig(),
+        [this.export.name]: this.export.getButtonConfig(),
+        [this.expand.name]: this.expand.getButtonConfig(),
+        [this.resetDefaultValues.name]: this.resetDefaultValues.getButtonConfig(),
+      };
+    } else {
+      switch (name) {
+        case this.query.name:
+          config = this.query.getButtonConfig();
+          break;
+        case this.moreQuery.name:
+          config = this.moreQuery.getButtonConfig();
+          break;
+        case this.advancedQuery.name:
+          config = this.advancedQuery.getButtonConfig();
+          break;
+        case this.reset.name:
+          config = this.reset.getButtonConfig();
+          break;
+        case this.refresh.name:
+          config = this.refresh.getButtonConfig();
+          break;
+
+        case this.add.name:
+          config = this.add.getButtonConfig();
+          break;
+        case this.addTop.name:
+          config = this.addTop.getButtonConfig();
+          break;
+        case this.addChild.name:
+          config = this.addChild.getButtonConfig();
+          break;
+
+        case this.edit.name:
+          config = this.edit.getButtonConfig();
+          break;
+        case this.cellEdit.name:
+          config = this.cellEdit.getButtonConfig();
+          break;
+        case this.inlineCellEdit.name:
+          config = this.inlineCellEdit.getButtonConfig();
+          break;
+        case this.inlineRowEdit.name:
+          config = this.inlineRowEdit.getButtonConfig();
+          break;
+        case this.inlineRowsEdit.name:
+          config = this.inlineRowsEdit.getButtonConfig();
+          break;
+        case this.clone.name:
+          config = this.clone.getButtonConfig();
+          break;
+
+        case this.remove.name:
+          config = this.remove.getButtonConfig();
+          break;
+
+        case this.fullScreen.name:
+          config = this.fullScreen.getButtonConfig();
+          break;
+        case this.separator.name:
+          config = this.separator.getButtonConfig();
+          break;
+        case this.view.name:
+          config = this.view.getButtonConfig();
+          break;
+        case this.export.name:
+          config = this.export.getButtonConfig();
+          break;
+        case this.expand.name:
+          config = this.expand.getButtonConfig();
+          break;
+        case this.resetDefaultValues.name:
+          config = this.resetDefaultValues.getButtonConfig();
+          break;
+      }
+    }
+    return config;
+  }
+
+  setInstance(instance: any, tools: GridTools) {
+    this.query.setInstance(instance, tools);
+    this.moreQuery.setInstance(instance, tools);
+    this.advancedQuery.setInstance(instance, tools);
+    this.reset.setInstance(instance, tools);
+    this.refresh.setInstance(instance, tools);
+
+    this.add.setInstance(instance, tools);
+    this.addTop.setInstance(instance, tools);
+    this.addChild.setInstance(instance, tools);
+
+    this.edit.setInstance(instance, tools);
+    this.cellEdit.setInstance(instance, tools);
+    this.inlineCellEdit.setInstance(instance, tools);
+    this.inlineRowEdit.setInstance(instance, tools);
+    this.inlineRowsEdit.setInstance(instance, tools);
+    this.clone.setInstance(instance, tools);
+
+    this.remove.setInstance(instance, tools);
+
+    this.fullScreen.setInstance(instance, tools);
+    this.separator.setInstance(instance, tools);
+    this.view.setInstance(instance, tools);
+    this.export.setInstance(instance, tools);
+    this.expand.setInstance(instance, tools);
+    this.resetDefaultValues.setInstance(instance, tools);
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Add.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Add.ts
new file mode 100644
index 00000000..64c12917
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Add.ts
@@ -0,0 +1,30 @@
+import { $t } from '@/platform';
+import { Button } from '../Button';
+import { Constant, PropsType, TableType } from '../../index';
+
+export class Add extends Button {
+  name = 'add';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    this.openEditor(args.grid, $t('action.addNew'), Constant.FORM_STATUS.ADD, undefined);
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'add',
+      labelI18nKey: 'action.addNew',
+      label: $t('action.addNew'),
+      click: this.click,
+      afterEditorOpen: (args) => {
+        this.tools?.em.afterEditorOpen(undefined);
+      },
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AddChild.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AddChild.ts
new file mode 100644
index 00000000..b933bd76
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AddChild.ts
@@ -0,0 +1,36 @@
+import { $t } from '@/platform';
+import { Button } from '../Button';
+import { Constant, PropsType, TableType } from '../../index';
+
+export class AddChild extends Button {
+  name = 'addChild';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    this.openEditor(args.grid, $t('action.addChild'), Constant.FORM_STATUS.ADD_CHILD, undefined);
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'playlist_add',
+      labelI18nKey: 'action.addChild',
+      label: $t('action.addChild'),
+      enableIf: (args) => {
+        if (args.selected) {
+          return true;
+        }
+        return false;
+      },
+      click: this.click,
+      afterEditorOpen: (args) => {
+        this.tools?.em.afterEditorOpen(undefined);
+      },
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AddTop.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AddTop.ts
new file mode 100644
index 00000000..a7507df2
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AddTop.ts
@@ -0,0 +1,30 @@
+import { $t } from '@/platform';
+import { Button } from '../Button';
+import { Constant, PropsType, TableType } from '../../index';
+
+export class AddTop extends Button {
+  name = 'addTop';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    this.openEditor(args.grid, $t('action.addTop'), Constant.FORM_STATUS.ADD_TOP, undefined);
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'add',
+      labelI18nKey: 'action.addTop',
+      label: $t('action.addTop'),
+      click: (args) => {},
+      afterEditorOpen: (args) => {
+        this.tools?.em.afterEditorOpen(undefined);
+      },
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AdvancedQuery.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AdvancedQuery.ts
new file mode 100644
index 00000000..a2d287c0
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/AdvancedQuery.ts
@@ -0,0 +1,34 @@
+import { $t } from '@/platform';
+import { PropsType, TableType } from '../../index';
+import { Button } from '../Button';
+
+export class AdvancedQuery extends Button {
+  name = 'advancedQuery';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    this.table.advancedQueryStatus = !this.table.advancedQueryStatus;
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'manage_search',
+      labelI18nKey: 'action.advancedQuery',
+      label: $t('action.advancedQuery'),
+      enableIf: (args) => {
+        if (this.props.queryFormFields.length > 0 && this.props.advancedQuery) {
+          return true;
+        } else {
+          return false;
+        }
+      },
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/CellEdit.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/CellEdit.ts
new file mode 100644
index 00000000..7157868b
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/CellEdit.ts
@@ -0,0 +1,45 @@
+import { $t, NotifyManager, Tools } from '@/platform';
+import { Button } from '../Button';
+import { Constant, PropsType, TableType } from '../../index';
+
+export class CellEdit extends Button {
+  name = 'cellEdit';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    const selectedCell = args.grid.getSelectedCell();
+    if (args.grid.props.selectMode !== Constant.SELECT_MODE.CELL) {
+      console.warn('[w-grid]`selectMode` property is not `cell`, Cannot use cell editing function.');
+      return false;
+    } else if (Tools.isEmpty(selectedCell.colName)) {
+      NotifyManager.info('请选择要编辑的单元格');
+      return false;
+    } else if (!this.tools?.editFM.getEditorFieldByName(selectedCell.colName)) {
+      console.warn('[w-grid]The column selected is not configured with a component type for editing.');
+      return false;
+    }
+    // 弹出模态框编辑，但是只编辑该列的值
+    args.grid.getCellEditorDialog().show();
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'border_color',
+      labelI18nKey: 'action.edit',
+      label: $t('action.edit'),
+      enableIf: (args) => {
+        if (!Tools.isEmpty(args.grid.getSelectedCell()['colName'])) {
+          return true;
+        }
+        return false;
+      },
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Clone.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Clone.ts
new file mode 100644
index 00000000..d79f5e5a
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Clone.ts
@@ -0,0 +1,41 @@
+import { $t, NotifyManager } from '@/platform';
+import { Button } from '../Button';
+import { Constant, PropsType, TableType } from '../../index';
+
+export class Clone extends Button {
+  name = 'clone';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    if (!args.selected) {
+      NotifyManager.warn($t('action.copy.tip'));
+    } else {
+      args.selected[args.grid.props.primaryKey] = undefined;
+      this.openEditor(args.grid, $t('action.copy'), Constant.FORM_STATUS.CLONE, args.selected);
+    }
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'content_copy',
+      labelI18nKey: 'action.copy',
+      label: $t('action.copy'),
+      enableIf: (args) => {
+        if (args.selected) {
+          return true;
+        }
+        return false;
+      },
+      click: this.click,
+      afterEditorOpen: (args) => {
+        this.tools?.em.afterEditorOpen(args.selected);
+      },
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Edit.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Edit.ts
new file mode 100644
index 00000000..224a4ff6
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Edit.ts
@@ -0,0 +1,40 @@
+import { $t, NotifyManager } from '@/platform';
+import { Button } from '../Button';
+import { Constant, PropsType, TableType } from '../../index';
+
+export class Edit extends Button {
+  name = 'edit';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    if (!args.selected) {
+      NotifyManager.warn($t('action.edit.tip'));
+    } else {
+      this.openEditor(args.grid, $t('action.edit'), Constant.FORM_STATUS.EDIT, args.selected);
+    }
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'edit',
+      labelI18nKey: 'action.edit',
+      label: $t('action.edit'),
+      enableIf: (args) => {
+        if (args.selected) {
+          return true;
+        }
+        return false;
+      },
+      click: this.click,
+      afterEditorOpen: (args) => {
+        this.tools?.em.afterEditorOpen(args.selected);
+      },
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Expand.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Expand.ts
new file mode 100644
index 00000000..0a4297b6
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Expand.ts
@@ -0,0 +1,42 @@
+import { $t } from '@/platform';
+import { PropsType, TableType } from '../../index';
+import { Button } from '../Button';
+
+export class Expand extends Button {
+  name = 'expand';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  async click(args) {
+    if (this.table.store.expand) {
+      this.tools?.apiFM.operator.collapse(undefined, true);
+    } else {
+      if (this.props.tree && this.props.treeLazyLoad && !this.table.store.alreadyLoadAllData) {
+        this.table.store.alreadyLoadAllData = true;
+        this.table.store.loading = true;
+        const datas = await this.tools?.reqApiFM.treeFetchDataByForeignKey();
+        this.tools?.apiFM.localMode.setLocalData(datas);
+        this.table.store.loading = false;
+      }
+      this.tools?.apiFM.operator.expand(undefined, true);
+    }
+    this.table.store.expand = !this.table.store.expand;
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: () => {
+        return this.table.store.expand ? 'expand_less' : 'expand_more';
+      },
+      label: () => {
+        return this.table.store.expand ? $t('action.collapseAll') : $t('action.expandAll');
+      },
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Export.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Export.ts
new file mode 100644
index 00000000..578e3571
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Export.ts
@@ -0,0 +1,89 @@
+import { $t, axios, NotifyManager, Tools } from '@/platform';
+import { exportFile } from 'quasar';
+import { PropsType, TableType } from '../../index';
+import { Button } from '../Button';
+
+export class Export extends Button {
+  name = 'export';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getExportData = this.getExportData.bind(this);
+    this.wrapCsvValue = this.wrapCsvValue.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  async click(args) {
+    this.showLoading();
+    let exportData = args.grid.getRows();
+    // 判断是否配置了 url， 以不分页形式请求后端获取全部数据一把导出。
+    if (!Tools.isEmpty(args.grid.props.fetchDataUrl) || !Tools.isEmpty(args.grid.props.dataUrl)) {
+      const fetchResult = await this.getExportData();
+      if (fetchResult && fetchResult.length > 0) {
+        exportData = fetchResult;
+      }
+    }
+    const content = [args.grid.props.columns.map((col) => this.wrapCsvValue(col.label))]
+      .concat(
+        exportData.map((row) =>
+          args.grid.props.columns
+            .map((col) =>
+              this.wrapCsvValue(typeof col.field === 'function' ? col.field(row) : row[col.field === void 0 ? col.name : col.field], col.format, row),
+            )
+            .join(','),
+        ),
+      )
+      .join('\r\n');
+
+    const status = exportFile('table-export.csv', content, {
+      encoding: 'utf-8',
+      mimeType: 'text/csv',
+      byteOrderMark: '\uFEFF', // 解决乱码问题
+    });
+
+    if (status !== true) {
+      NotifyManager.error($t('action.export.failed'));
+    }
+    this.hideLoading();
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'file_download',
+      labelI18nKey: 'action.export',
+      label: $t('action.export'),
+      click: this.click,
+    };
+  }
+
+  private async getExportData() {
+    let resultData = <any>[];
+    const reqParams: any = { pageable: false };
+    const urlSearchParams = this.tools?.criteriaFM.buildURLSearchParams(reqParams);
+    const resp = await axios.get(this.table?.url.fetchDataUrl || this.table.url.dataUrl, { params: urlSearchParams });
+    if (resp && resp.data) {
+      const responseData = resp.data;
+      if (Array.isArray(responseData)) {
+        resultData = responseData;
+      } else if (typeof responseData === 'object' && responseData.content) {
+        resultData = responseData.content;
+      }
+    }
+    return resultData;
+  }
+
+  private wrapCsvValue(val, formatFn, row) {
+    let formatted = formatFn !== void 0 ? formatFn(val, row) : val;
+    formatted = formatted === void 0 || formatted === null ? '' : String(formatted);
+    formatted = formatted.split('"').join('""');
+    /**
+     * Excel accepts \n and \r in strings, but some other CSV parsers do not
+     * Uncomment the next two lines to escape new lines
+     */
+    // .split('\n').join('\\n')
+    // .split('\r').join('\\r')
+    return `"${formatted}"`;
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/FullScreen.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/FullScreen.ts
new file mode 100644
index 00000000..cd98a9a3
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/FullScreen.ts
@@ -0,0 +1,30 @@
+import { $t } from '@/platform';
+import { PropsType, TableType } from '../../index';
+import { Button } from '../Button';
+
+export class FullScreen extends Button {
+  name = 'fullScreen';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    this.table.componentRef.getTableRef().toggleFullscreen();
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: () => {
+        return this.table.configStore.isFullscreen ? 'fullscreen_exit' : 'fullscreen';
+      },
+      label: () => {
+        return this.table.configStore.isFullscreen ? $t('logout') : $t('fullScreen');
+      },
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineCellEdit.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineCellEdit.ts
new file mode 100644
index 00000000..f125e269
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineCellEdit.ts
@@ -0,0 +1,44 @@
+import { $t, Tools, NotifyManager } from '@/platform';
+import { Button } from '../Button';
+import { Constant, PropsType, TableType } from '../../index';
+
+export class InlineCellEdit extends Button {
+  name = 'inlineCellEdit';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    const selectedCell = args.grid.getSelectedCell();
+    if (args.grid.props.selectMode !== Constant.SELECT_MODE.CELL) {
+      console.warn('[w-grid]`selectMode` property is not `cell`, Cannot use cell editing function.');
+      return false;
+    } else if (Tools.isEmpty(selectedCell.colName)) {
+      NotifyManager.info('请选择要编辑的单元格');
+      return false;
+    } else if (!this.tools?.editFM.getEditorFieldByName(selectedCell.colName)) {
+      console.warn('[w-grid]The column selected is not configured with a component type for editing.');
+      return false;
+    }
+    this.table.store.inlineEditStatus = Constant.EDIT_STATUS.CELL;
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'border_color',
+      labelI18nKey: 'action.edit',
+      label: $t('action.edit'),
+      enableIf: (args) => {
+        if (!Tools.isEmpty(args.grid.getSelectedCell()['colName'])) {
+          return true;
+        }
+        return false;
+      },
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowEdit.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowEdit.ts
new file mode 100644
index 00000000..07fb53e7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowEdit.ts
@@ -0,0 +1,37 @@
+import { $t } from '@/platform';
+import { Button } from '../Button';
+import { Constant, PropsType, TableType } from '../../index';
+
+export class InlineRowEdit extends Button {
+  name = 'inlineRowEdit';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    if (this.props?.editor?.form?.fields?.length > 0) {
+      this.table.store.inlineEditStatus = Constant.EDIT_STATUS.ROW;
+    } else {
+      console.warn('[w-grid]Not configured with a component type for editing.');
+    }
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'edit_note',
+      labelI18nKey: 'action.edit',
+      label: $t('action.edit'),
+      enableIf: (args) => {
+        if (args.selected) {
+          return true;
+        }
+        return false;
+      },
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowsEdit.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowsEdit.ts
new file mode 100644
index 00000000..f7bf94d0
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/InlineRowsEdit.ts
@@ -0,0 +1,35 @@
+import { $t } from '@/platform';
+import { Button } from '../Button';
+import { Constant, PropsType, TableType } from '../../index';
+
+export class InlineRowsEdit extends Button {
+  name = 'inlineRowsEdit';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    if (this.props.editor?.form?.fields?.length > 0) {
+      this.table.store.inlineEditStatus = Constant.EDIT_STATUS.ROWS;
+      // 清空勾选与选中
+      args.grid.clearSelected();
+      args.grid.clearTicked();
+      this.table.store.headerTicked = false;
+    } else {
+      console.warn('[w-grid]Not configured with a component type for editing.');
+    }
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'app_registration',
+      labelI18nKey: 'action.edit',
+      label: $t('action.edit'),
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/MoreQuery.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/MoreQuery.ts
new file mode 100644
index 00000000..f6e74612
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/MoreQuery.ts
@@ -0,0 +1,35 @@
+import { $t } from '@/platform';
+import { Button } from '../Button';
+import { Constant, PropsType, TableType } from '../../index';
+
+export class MoreQuery extends Button {
+  name = 'moreQuery';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    this.table.moreQueryStatus = !this.table.moreQueryStatus;
+    this.table.componentRef.getTopRef()?.handleQueryFormShowField();
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'zoom_in',
+      labelI18nKey: 'action.moreQueryConditions',
+      label: $t('action.moreQueryConditions'),
+      enableIf: (args) => {
+        if (this.props.queryFormFields.length <= this.table.queryFormDisplayFields.length && !this.table.moreQueryStatus) {
+          return false;
+        } else {
+          return true;
+        }
+      },
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Query.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Query.ts
new file mode 100644
index 00000000..93552787
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Query.ts
@@ -0,0 +1,27 @@
+import { $t } from '@/platform';
+import { PropsType, TableType } from '../../index';
+import { Button } from '../Button';
+
+export class Query extends Button {
+  name = 'query';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    this.tools?.apiFM.operator.refreshGrid();
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'search',
+      labelI18nKey: 'action.query',
+      label: $t('action.query'),
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Refresh.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Refresh.ts
new file mode 100644
index 00000000..8e78563a
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Refresh.ts
@@ -0,0 +1,27 @@
+import { $t } from '@/platform';
+import { PropsType, TableType } from '../../index';
+import { Button } from '../Button';
+
+export class Refresh extends Button {
+  name = 'refresh';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    this.tools?.apiFM.operator.refreshGrid();
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'loop',
+      labelI18nKey: 'action.refresh',
+      label: $t('action.refresh'),
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Remove.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Remove.ts
new file mode 100644
index 00000000..709b27ed
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Remove.ts
@@ -0,0 +1,80 @@
+import { $t, DialogManager } from '@/platform';
+import { Constant, PropsType, TableType } from '../../index';
+import { Button } from '../Button';
+
+export class Remove extends Button {
+  name = 'remove';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+    this.remove = this.remove.bind(this);
+    this.getIds = this.getIds.bind(this);
+  }
+
+  click(args: any, tips: boolean = true) {
+    if (!tips) {
+      this.remove(args);
+    } else {
+      DialogManager.yesnoDialog({
+        title: $t('confirm') || '',
+        message: $t('action.remove.tip') || '',
+        yesCallback: () => {
+          this.remove(args);
+        },
+      });
+    }
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'delete',
+      labelI18nKey: 'action.remove',
+      label: $t('action.remove'),
+      enableIf: (args) => {
+        if (args.ticked) {
+          return true;
+        } else if (args.selected) {
+          return true;
+        }
+        return false;
+      },
+      click: this.click,
+    };
+  }
+
+  private async remove(args: any) {
+    let ids = this.getIds(args);
+    // 触发请求前事件
+    const eventResult = await this.tools?.em.beforeRemove(ids);
+    if (eventResult?.ids.length > 0) {
+      ids = eventResult.ids;
+    }
+    if (eventResult.submit) {
+      if (this.props.localMode) {
+        this.tools?.apiFM.localMode.removeLocalData(ids);
+      } else {
+        this.tools?.reqApiFM.remove(ids);
+      }
+    }
+  }
+
+  // 准备id集合
+  private getIds(args): Array<any> {
+    const ids = <any>[];
+    const tickedRows = args.tickeds;
+    const selectedRows = args.selecteds;
+    if (tickedRows?.length > 0) {
+      tickedRows.forEach((item) => {
+        ids.push(this.props.localMode ? item[Constant.FIELD_NAMES.ROW_KEY] : item[this.props.primaryKey]);
+      });
+    } else if (selectedRows?.length > 0) {
+      selectedRows.forEach((item) => {
+        ids.push(this.props.localMode ? item[Constant.FIELD_NAMES.ROW_KEY] : item[this.props.primaryKey]);
+      });
+    }
+    return ids;
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Reset.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Reset.ts
new file mode 100644
index 00000000..62763610
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Reset.ts
@@ -0,0 +1,27 @@
+import { $t } from '@/platform';
+import { PropsType, TableType } from '../../index';
+import { Button } from '../Button';
+
+export class Reset extends Button {
+  name = 'reset';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    args.grid.getQueryForm().reset();
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'restart_alt',
+      labelI18nKey: 'action.reset',
+      label: $t('action.reset'),
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/ResetDefaultValues.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/ResetDefaultValues.ts
new file mode 100644
index 00000000..592e2c55
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/ResetDefaultValues.ts
@@ -0,0 +1,53 @@
+import { $t, axios, DialogManager, NotifyManager } from '@/platform';
+import { PropsType, TableType } from '../../index';
+import { Button } from '../Button';
+
+export class ResetDefaultValues extends Button {
+  name = 'resetDefaultValues';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+    this.resetDefaultValues = this.resetDefaultValues.bind(this);
+  }
+
+  click(args, tips: boolean = true) {
+    if (!tips) {
+      this.resetDefaultValues(args);
+    } else {
+      DialogManager.yesnoDialog({
+        title: $t('confirm'),
+        message: $t('action.resetDefaultValues.tip'),
+        yesCallback: () => {
+          this.resetDefaultValues(args);
+        },
+      });
+    }
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'bi-copy',
+      labelI18nKey: 'action.resetDefaultValues',
+      label: $t('action.resetDefaultValues'),
+      click: this.click,
+    };
+  }
+
+  resetDefaultValues(args) {
+    const requestParams: any = {
+      method: 'POST',
+      url: this.table.url.dataUrl + '/resetDefaultValues',
+    };
+    axios(requestParams)
+      .then(() => {
+        NotifyManager.info($t('tip.operationSuccess'));
+        args.grid.refresh();
+      })
+      .catch((error) => {
+        console.error('[w-grid]ResetDefaultValues error：', error);
+      });
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Separator.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Separator.ts
new file mode 100644
index 00000000..9262b661
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/Separator.ts
@@ -0,0 +1,15 @@
+import { PropsType, TableType } from '../../index';
+import { Button } from '../Button';
+
+export class Separator extends Button {
+  name = 'separator';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  getButtonConfig() {
+    return 'separator';
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/View.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/View.ts
new file mode 100644
index 00000000..c11a1384
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/toolbar/buttons/View.ts
@@ -0,0 +1,33 @@
+import { $t } from '@/platform';
+import { PropsType, TableType } from '../../index';
+import { Button } from '../Button';
+
+export class View extends Button {
+  name = 'view';
+
+  constructor(props: PropsType, table: TableType) {
+    super(props, table);
+    this.click = this.click.bind(this);
+    this.getButtonConfig = this.getButtonConfig.bind(this);
+  }
+
+  click(args) {
+    this.tools?.apiFM.operator.viewData();
+  }
+
+  getButtonConfig() {
+    return {
+      name: this.name,
+      icon: 'visibility',
+      labelI18nKey: 'action.view',
+      label: $t('action.view'),
+      enableIf: (args) => {
+        if (args.selected) {
+          return true;
+        }
+        return false;
+      },
+      click: this.click,
+    };
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/CriteriaType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/CriteriaType.ts
new file mode 100644
index 00000000..97d2fa0d
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/CriteriaType.ts
@@ -0,0 +1,5 @@
+export type CriteriaType = {
+  fieldName: string;
+  operator: string;
+  value: any;
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/EventType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/EventType.ts
new file mode 100644
index 00000000..e46cc0d8
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/EventType.ts
@@ -0,0 +1,26 @@
+export type EventType = {
+  // 行点击事件
+  (e: 'rowClick', args: object): void;
+  // 行双击事件
+  (e: 'rowDbClick', args: object): void;
+  // 行数据checkbox勾选状态改变事件
+  (e: 'updateTicked', args: object): void;
+  // 表格列头全部勾选checkbox状态改变事件
+  (e: 'updateTickeds', args: object): void;
+  // 表格请求数据前事件
+  (e: 'beforeRequestData', args: object): void;
+  // 表格请求数据后事件
+  (e: 'afterRequestData', args: object): void;
+  // 内置新增编辑功能数据提交前触发事件
+  (e: 'beforeEditorDataSubmit', args: object): void;
+  // 内置新增编辑功能数据提交完成后触发事件
+  (e: 'afterEditorDataSubmit', args: object): void;
+  // 内置删除功能提交完成前回调函数
+  (e: 'beforeRemove', args: object): void;
+  // 内置删除功能提交完成后回调函数
+  (e: 'afterRemove', args: object): void;
+  // 新增窗口打开之后
+  (e: 'afterEditorOpen', args: object): void;
+  // 行拖拽排序完成后
+  (e: 'afterDragAndDrop', args: object): void;
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/PropsType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/PropsType.ts
new file mode 100644
index 00000000..cd1061b0
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/PropsType.ts
@@ -0,0 +1,246 @@
+export type PropsType = {
+  /**
+   * 表格高度
+   */
+  height: number,
+  /**
+   * 表格标题
+   */
+  title: string,
+  /**
+   * 自动加载数据
+   */
+  autoFetchData: boolean,
+  /**
+   * 本地模式，启用该模式后，除了查询数据依旧通过 autoFetchData 与 url 控制外，其他所有与后端交互的请求都失效，同时分页属性也失效
+   */
+  localMode: boolean,
+  /**
+   * 选择模式
+   */
+  selectMode: string,
+  /**
+   * 拖拽数据行排序的模式，默认不可拖拽，字符串`local`为本地排序，只根据配置的字段进行本地排序，不会将数据发送至后端，字符串`server`为远程排序，拖拽完成后会将数据发送至后端。
+   */
+  dndMode?: undefined | string,
+  /**
+   * 拖拽排序时根据哪个字段进行排序，默认为`order`字段
+   */
+  dndOrderBy: string,
+  /**
+   * 是否需要分页，当启用树形表格模式时该属性失效，树形表格不支持分页。
+   */
+  pageable: boolean,
+  /**
+   * 是否显示表格配置按钮
+   */
+  configButton: boolean,
+  /**
+   * 表格数据操作请求的URL前缀
+   */
+  dataUrl: string,
+  /**
+   * 获取数据URL
+   */
+  fetchDataUrl: string,
+  /**
+   * 新增数据url
+   */
+  addDataUrl: string,
+  /**
+   * 修改数据url
+   */
+  editDataUrl: string,
+  /**
+   * 删除数据url
+   */
+  removeDataUrl: string,
+  /**
+   * 表格整体紧凑模式
+   */
+  dense?: undefined | boolean,
+  /**
+   * 表格列标题紧凑模式
+   */
+  denseHeader?: undefined | boolean,
+  /**
+   * 表格数据行紧凑模式
+   */
+  denseBody?: undefined | boolean,
+  /**
+   * 表格底部分页栏紧凑模式
+   */
+  denseBottom?: undefined | boolean,
+  /**
+   * 表格toolbar按钮栏紧凑模式
+   */
+  denseToolbar?: undefined | boolean,
+  /**
+   * 是否显示排序号
+   */
+  sortNo: boolean,
+  /**
+   * 从左侧开始冻结列数，复选框与排序列不计算在内，支持1-10列。
+   */
+  stickyNum: number,
+  /**
+   * checkbox选择模式，默认启用
+   */
+  checkboxSelection: boolean,
+  /**
+   * 行数据中记录checkbox勾选状态的字段名
+   */
+  tickedField: string,
+  /**
+   * 行数据中记录行点击选中状态的字段名
+   */
+  selectedField: string,
+  /**
+   * 树形表格模式，按照层级关系构建数据并以树形展现
+   */
+  tree: boolean,
+  /**
+   * 树型表格模式, 懒加载
+   */
+  treeLazyLoad: boolean,
+  /**
+   * 树形表格模式，图标函数，带有一个参数，行数据
+   */
+  treeIcon?: Function | undefined,
+  /**
+   * 树形表格模式，树形表格数据加载后是否全部展开
+   */
+  treeDefaultExpandAll: boolean,
+  /**
+   * 树形表格模式，树勾选策略，strict：节点自己，leaf：包含子节点
+   */
+  treeTickStrategy: string,
+  /**
+   * 树形表格模式的数据关系，包括：parent, children，当为parent时组件根据数据主键与数据外键构建树形数据，否则需要自己构建好树形数据放到children属性中。
+   */
+  treeRelationship: string,
+  /**
+   * 数据主键（常规表格模式时，该字段可用作内置的编辑删除等功能对应的后端API入参，如：继承RestCrudController的update所需的入参。树形表格模式时，该字段为构建树数据的主键）
+   */
+  primaryKey: string,
+  /**
+   * 数据外键（常规表格模式时，该字段暂时无用，将来可用作多个表格的数据关系字段。树形表格模式时，该字段为构建树数据的关系字段）
+   */
+  foreignKey: string,
+  /**
+   * 新增、删除、修改成功后是否刷新数据列表，默认不刷新但是新增修改后台必须返回对应的行数据对象，删除则必须返回删除的记录集primaryKey集合。
+   */
+  refreshData?: boolean,
+  /**
+   * 默认的双击操作：可填写内置或自定义按钮name，执行的操作为按钮对应的click，固定值提供：expand(展开双击的行)、none(双击不执行任何动作)
+   */
+  dbClickOperation: string,
+  /**
+   * 表格分割线，支持：horizontal、vertical、cell、none
+   */
+  separator: string,
+  /**
+   * 隐藏表头
+   */
+  hideHeader?: boolean,
+  /**
+   * 隐藏底部
+   */
+  hideBottom?: boolean,
+  /**
+   * 分组模式，支持：alone、merge
+   */
+  groupMode?: undefined | string,
+  /**
+   * alone分组模式下默认展开的组，字符串支持：all、first、none，数组可配置多个组名。
+   */
+  groupStartOpen?: string | Array<any> | Function,
+  /**
+   * 分组字段配置，当分组模式为 alone 时若配置的为数组，取数组第一个字段。
+   */
+  groupByField: string | Array<any>,
+  /**
+   * 表格追加行，添加到当前表格数据行尾，可添加多行，支持跨行跨列配置，用于添加合计或者额外信息。
+   */
+  appendRows: Array<any>,
+  /**
+   * 默认排序字段，示例：['userName', '-lastModifyDate']，其中“-”开头表示倒序。
+   */
+  sortBy: Array<any>,
+  /**
+   * 默认勾选的记录，传入一个对象，包含：columnName（列名称，字符串类型，该属性不传默认根据数据主键查找）、data（需要勾选的数据，数组类型）
+   */
+  tickedRecord: any,
+  /**
+   * 高级查询
+   */
+  advancedQuery: boolean,
+  /**
+   * 查询条件，查询、翻页、刷新等操作都会带上的查询条件
+   */
+  queryCriteria: any,
+  /**
+   * 列定义
+   */
+  columns: Array<any>,
+  /**
+   * 查询表单字段
+   */
+  queryFormFields: Array<any>,
+  /**
+   * 查询表单一行显示几个元素
+   */
+  queryFormColsNum: any,
+  /**
+   * 查询表单显示几行
+   */
+  queryFormRowNum: number,
+  /**
+   * 查询表单 form 组件属性
+   */
+  queryFormAttrs: any,
+  /**
+   * toolbar 按钮
+   */
+  toolbarActions: Array<any>,
+  /**
+   * toolbar 属性
+   */
+  toolbarConfigure: any,
+  /**
+   * 分页大小，后台初始页码等配置
+   */
+  pagination: any,
+  /**
+   * 编辑相关窗口、表单、字段配置
+   */
+  editor?: any,
+  /**
+   * 查看抽屉、字段配置
+   */
+  viewer?: any,
+  /**
+   * 作为form中的组件使用时控制表格是否显示
+   */
+  showIf?: boolean | Function,
+  /**
+   * 作为form中的组件使用时配置表单form实例
+   */
+  form?: any,
+  /**
+   * 用户自定义单击函数
+   */
+  onRowClick?: Function,
+  /**
+   * 用户自定义双击函数
+   */
+  onRowDbClick?: Function,
+  /**
+   * 用户自定义数据勾选函数
+   */
+  onUpdateTicked?: Function,
+  /**
+   * 用户自定义拖拽回调函数
+   */
+  onAfterDragAndDrop?: Function,
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/TableType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/TableType.ts
new file mode 100644
index 00000000..fd1f1fbc
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/TableType.ts
@@ -0,0 +1,60 @@
+import { ColorType } from '../types/table/ColorType';
+import { UrlType } from '../types/table/UrlType';
+import { ConfigPanelStoreType } from '../types/table/ConfigPanelStoreType';
+import { StoreType } from '../types/table/StoreType';
+import { ComponentRefType } from '../types/table/ComponentRefType';
+
+export type TableType = {
+  /**
+   * 用户传入的原始列
+   */
+  originalColumns: Array<any>;
+  /**
+   * 处理完默认属性并将多表头中配置的列平铺后的列
+   */
+  columns: Array<any>;
+  /**
+   * 当前表格数据
+   */
+  rows: Array<any>;
+  /**
+   * 默认 criteria 查询条件
+   */
+  queryCriteria: any;
+  /**
+   * 当前更多查询是否为激活状态
+   */
+  moreQueryStatus: boolean;
+  /**
+   * 高级查询是否为激活状态
+   */
+  advancedQueryStatus: boolean,
+  /**
+   * 高级查询模型值
+   */
+  advancedQueryModelValue?: object,
+  /**
+   * 查询 Form 当前显示的字段
+   */
+  queryFormDisplayFields: Array<any>;
+  /**
+   * 获取子组件ref对象的函数
+   */
+  componentRef: ComponentRefType;
+  /**
+   * 颜色配置
+   */
+  color: ColorType;
+  /**
+   * URL配置
+   */
+  url: UrlType;
+  /**
+   * 表格右上角用户自定义配置按钮涉及到的变量
+   */
+  configStore: ConfigPanelStoreType;
+  /**
+   * 变量存储对象
+   */
+  store: StoreType;
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/CellSelectType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/CellSelectType.ts
new file mode 100644
index 00000000..38cd6fd2
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/CellSelectType.ts
@@ -0,0 +1,26 @@
+
+/**
+ * 单元格选择类型
+ */
+export type CellSelectType = {
+  /**
+   * 行数据
+   */
+  row: any,
+  /**
+   * 前端主键
+   */
+  rowKey: string,
+  /**
+   * 数据主键
+   */
+  primaryKey?: string | number,
+  /**
+   * 列名称
+   */
+  colName: string,
+  /**
+   * 值
+   */
+  value?: any,
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ColorType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ColorType.ts
new file mode 100644
index 00000000..54de1ee0
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ColorType.ts
@@ -0,0 +1,18 @@
+export type ColorType = {
+  /**
+   * dark模式下的背景颜色
+   */
+  darkBgColor: string,
+  /**
+   * 列头背景颜色
+   */
+  headBgColor: string,
+  /**
+   * 边框线颜色
+   */
+  borderColor: string,
+  /**
+   * 锁定列时背景颜色
+   */
+  stickyBgColor: string,
+};
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ComponentRefType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ComponentRefType.ts
new file mode 100644
index 00000000..d72fb748
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ComponentRefType.ts
@@ -0,0 +1,9 @@
+export type ComponentRefType = {
+  getTableRef: Function,
+  getTopRef: Function,
+  getHeaderRef: Function,
+  getBodyRef: Function,
+  getEditorRef: Function,
+  getCellEditorRef: Function,
+  getViewRef: Function,
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ConfigPanelStoreType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ConfigPanelStoreType.ts
new file mode 100644
index 00000000..dfc2943e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/ConfigPanelStoreType.ts
@@ -0,0 +1,57 @@
+/**
+ * 表格右上角用户自定义配置按钮涉及到的变量
+ */
+export type ConfigPanelStoreType = {
+  /**
+   * 当前配置面板是否显示
+   */
+  showConfigPanel: boolean,
+  /**
+   * 表格当前是否为全屏模式
+   */
+  isFullscreen: boolean,
+  /**
+   * 表格分割线
+   */
+  separator: string,
+  /**
+   * 锁定列数
+   */
+  stickyNum: number,
+  /**
+   * 是否使用checkbox选择模式
+   */
+  useCheckboxSelection: boolean, 
+  /**
+   * 是否显示前端序号列
+   */
+  showSortNo: boolean,
+  /**
+   * 表格整体紧凑
+   */
+  dense: boolean,
+  /**
+   * 按钮栏紧凑
+   */
+  denseToolbar: boolean,
+  /**
+   * 列头紧凑
+   */
+  denseHeader: boolean,
+  /**
+   * 内容紧凑
+   */
+  denseBody: boolean,
+  /**
+   * 底部分页工具栏紧凑
+   */
+  denseBottom: boolean,
+  /**
+   * 分组模式为单独，行数据分组记录。
+   */
+  aloneGroupRecords: Array<any>,
+  /**
+   * 分组模式为单独时，当前分组字段
+   */
+  aloneGroupByField: undefined | string,
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/GridLocationType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/GridLocationType.ts
new file mode 100644
index 00000000..f7f2a003
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/GridLocationType.ts
@@ -0,0 +1,53 @@
+/**
+ * 表格位置信息类型
+ */
+export type GridLocationType = {
+  /**
+   * 表格当前所在Y轴位置
+   */
+  yLocation: number,
+  /**
+   * 无数据提示行所在Y轴位置
+   */
+  noDataTrYLocation: number,
+  /**
+   * 表格当前top区域高度（表格列头上方区域）
+   */
+  topHeight: number,
+  /**
+   * 表格当前bottom区域高度（无可用数据、分页那块区域）
+   */
+  bottomHeight: number,
+  /**
+   * 表格当前middle区域宽度（表格列头及数据行区域）
+   */
+  middleWidth: number,
+  /**
+   * 表格出现滚动条时的宽度，若无滚动条则与 middleWidth 一致
+   */
+  middleScrollWidth: number,
+  /**
+   * 表格当前middle区域高度(表格列头及数据行区域)
+   */
+  middleHeight: number,
+  /**
+   * 表格当前列头高度
+   */
+  columnHeadHeight: number,
+  /**
+   * 当前表格title排除无数据行的总高度
+   */
+  titleTotalHeight: number,
+  /**
+   * 隐藏表头时无数据提示区域高度
+   */
+  hideHeaderNoDataHeight: number,
+  /**
+   * 表格进入全屏前y轴位置
+   */
+  tableInFullscreenY: number,
+  /**
+   * 表格进入全屏前无数据提示行y轴位置
+   */
+  noDataTrInFullscreenY: number,
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/PaginationConfigType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/PaginationConfigType.ts
new file mode 100644
index 00000000..bd895930
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/PaginationConfigType.ts
@@ -0,0 +1,26 @@
+
+/**
+ * 分页配置类型
+ */
+export type PaginationConfigType = {
+  /**
+   * 显示边界按钮链接
+   */
+  boundaryLinks: boolean,
+  /**
+   * 始终显示第一页和最后一页按钮（如果不使用“输入”）
+   */
+  boundaryNumbers: boolean,
+  /**
+   * 显示方向按钮
+   */
+  directionLinks: boolean,
+  /**
+   * 页面可用时显示省略号
+   */
+  ellipses: boolean,
+  /**
+   * 一次显示的最大页面链接数；0表示无限
+   */
+  maxPages: number
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/PaginationType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/PaginationType.ts
new file mode 100644
index 00000000..a63885a3
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/PaginationType.ts
@@ -0,0 +1,39 @@
+import { PaginationConfigType } from './PaginationConfigType';
+
+/**
+ * 分页信息类型
+ */
+export type PaginationType = {
+  /**
+   * 排序字段
+   */
+  sortBy: any,
+  /**
+   * 是否倒序
+   */
+  descending: boolean,
+  /**
+   * 配置信息
+   */
+  config: PaginationConfigType,
+  /**
+   * 后端起始页码
+   */
+  reqPageStart: number,
+  /**
+   * 当前页码
+   */
+  page: number,
+  /**
+   * 一页显示多少行
+   */
+  rowsPerPage: number,
+  /**
+   * 总条数
+   */
+  rowsNumber: number,
+  /**
+   * 用户可选的每页显示数量
+   */
+  rowsPerPageOptions: Array<any>
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/StoreType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/StoreType.ts
new file mode 100644
index 00000000..e45833c7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/StoreType.ts
@@ -0,0 +1,77 @@
+import { GridLocationType } from './GridLocationType';
+import { PaginationType } from './PaginationType';
+import { CellSelectType } from './CellSelectType';
+
+/**
+ * 变量存储对象
+ */
+export type StoreType = {
+  /**
+   * 当前表格是否全部展开(树模式、单独分组模式通用)
+   */
+  expand: boolean,
+  /**
+   * 记录展开的数据集合（用于树模式、单独分组模式刷新表格时还原已经展开的数据记录）
+   */
+  expandDatas: Array<any>,
+  /**
+   * 已经加载全部数据标记（用于树表格`全部展开`按钮判断是否要加载当前所有数据的子节点）
+   */
+  alreadyLoadAllData: boolean,
+  /**
+   * 懒加载无子节点记录集合(用于树表格懒加载模式刷新或重新加载数据时不再请求该节点的子节点)
+   */
+  lazyloadNoChildrenDatas: Array<any>,
+  /**
+   * 非树表格表头全选checkbox状态
+   */
+  headerTicked: null | boolean,
+  /**
+   * 拖拽排序过程中的记录
+   */
+  dragRecords: Array<any>,
+  /**
+   * 表格内联编辑状态
+   */
+  inlineEditStatus: string,
+  /**
+   * 单元格选择模式时当前选中记录
+   */
+  cellSelected?: CellSelectType,
+  /**
+   * 分组模式为合并，行数据合并记录。
+   */
+  mergeGroupRecords: any,
+  /**
+   * 默认留白高度
+   */
+  spaceHeight: number,
+  /**
+   * 无数据提示i18n的key
+   */
+  noDataLabelI18nKey: string,
+  /**
+   * 表格当前是否处于加载状态
+   */
+  loading: boolean,
+  /**
+   * 加载提示i18n的key
+   */
+  loadingLabelI18nKey: string,
+  /**
+   * 单元格高度
+   */
+  bodyCellHeight: number,
+  /**
+   * 表格大小变化标记，每次触发 resize 后更改
+   */
+  resizeFlag: boolean,
+  /**
+   * 表格位置信息
+   */
+  location: GridLocationType,
+  /**
+   * 表格分页信息
+   */
+  pagination: PaginationType,
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/UrlType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/UrlType.ts
new file mode 100644
index 00000000..c4d0d1b1
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/UrlType.ts
@@ -0,0 +1,7 @@
+export type UrlType = {
+  dataUrl: string,
+  fetchDataUrl: string,
+  addDataUrl: string,
+  editDataUrl: string,
+  removeDataUrl: string,
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/toolbar/ChildrenBtn.vue b/io.sc.platform.core.frontend/src/platform/components/toolbar/ChildrenBtn.vue
index edea14c9..4d62411f 100644
--- a/io.sc.platform.core.frontend/src/platform/components/toolbar/ChildrenBtn.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/toolbar/ChildrenBtn.vue
@@ -2,7 +2,7 @@
   <q-item
     clickable
     :disable="
-      button[0].enableIf
+      button[0]?.enableIf
         ? !button[0].enableIf({
             selected: firstSelectedComputed,
             selecteds: selectedComputed,
@@ -40,7 +40,7 @@
               v-close-popup
               clickable
               :disable="
-                childrenBtn.enableIf
+                childrenBtn?.enableIf
                   ? !childrenBtn.enableIf({
                       selected: firstSelectedComputed,
                       selecteds: selectedComputed,
@@ -49,7 +49,7 @@
                       grid: grid,
                       selectedColName: props.grid.getSelectedCell()['colName'],
                     })
-                  : button[0].enableIf
+                  : button[0]?.enableIf
                     ? !button[0].enableIf({
                         selected: firstSelectedComputed,
                         selecteds: selectedComputed,
diff --git a/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
index ce117a27..9119fb33 100644
--- a/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
@@ -20,7 +20,7 @@
           :icon="dense ? undefined : getIcon(btn.data[0].icon)"
           :split="btn.data[0].click ? true : false"
           :disable="
-            btn.data[0].enableIf
+            btn.data[0]?.enableIf
               ? !btn.data[0].enableIf({
                   selected: firstSelectedComputed,
                   selecteds: selectedComputed,
@@ -60,7 +60,7 @@
                   v-close-popup
                   clickable
                   :disable="
-                    childrenBtn.enableIf
+                    childrenBtn?.enableIf
                       ? !childrenBtn.enableIf({
                           selected: firstSelectedComputed,
                           selecteds: selectedComputed,
@@ -88,7 +88,7 @@
           v-else
           :padding="dense ? padding : undefined"
           :disable="
-            btn.data.enableIf
+            btn?.data?.enableIf
               ? !btn.data.enableIf({
                   selected: firstSelectedComputed,
                   selecteds: selectedComputed,
@@ -151,7 +151,7 @@
               v-close-popup
               clickable
               :disable="
-                childrenBtn.data.enableIf
+                childrenBtn?.data?.enableIf
                   ? !childrenBtn.data.enableIf({
                       selected: firstSelectedComputed,
                       selecteds: selectedComputed,
@@ -185,17 +185,12 @@ import { Tools } from '@/platform/utils';
 import ChildrenBtn from './ChildrenBtn.vue';
 
 const padding = '5px 12px 5px 8px';
+const modelValue = defineModel({ type: Array, default: [] });
 const props = defineProps({
   xGap: { type: Number, default: 6 }, // 按扭之间x轴间隔像素点
   noIcon: { type: Boolean, default: false }, // 无icon模式
   align: { type: String, default: 'right' }, // 对齐方式
   dense: { type: Boolean, default: false }, // 紧凑模式
-  buttons: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
   grid: {
     type: Object,
     default: () => {
@@ -206,6 +201,13 @@ const props = defineProps({
 const containerRef = ref();
 const localFlag = ref(false);
 
+watch(
+  () => modelValue.value,
+  (newVal, oldVal) => {
+    handleButtons();
+  },
+);
+
 // 将所有按钮根据 name 提取到 JSON 对象中
 const buttonsJson = {};
 const extractButton = (btns: any) => {
@@ -220,42 +222,7 @@ const extractButton = (btns: any) => {
     }
   }
 };
-extractButton(props.buttons);
-
-// // 将按钮形成父子关系
-// const handleChildren = (parent, children, arr) => {
-//   for (const item of arr) {
-//     if (Array.isArray(item)) {
-//       const other = item.splice(1);
-//       const children_ = <any>[];
-//       handleChildren(item[0].name, children_, other);
-//       children.push({ parent, children: children_, button: buttonsJson[item[0].name] });
-//     } else if (typeof item === 'object') {
-//       children.push({ parent, children: null, button: buttonsJson[item.name] });
-//     } else if (typeof item === 'string' && item === 'separator') {
-//       // 当最后一个元素是分割符时，不再追加分割符，避免两个按钮之间出现重复的无意义分割符
-//       if (children.length > 0 && children[children.length - 1].button !== 'separator') {
-//         children.push({ parent, children: null, button: 'separator' });
-//       }
-//     }
-//   }
-// };
-// const buttons_ = <any>[];
-// for (const btn of props.buttons) {
-//   if (Array.isArray(btn)) {
-//     const other = btn.splice(1);
-//     const children = <any>[];
-//     handleChildren(btn[0].name, children, other);
-//     buttons_.push({ parent: null, children: children, button: buttonsJson[btn[0].name] });
-//   } else if (typeof btn === 'object') {
-//     buttons_.push({ parent: null, children: null, button: buttonsJson[btn.name] });
-//   } else if (typeof btn === 'string' && btn === 'separator') {
-//     // 当最后一个元素是分割符时，不再追加分割符，避免两个按钮之间出现重复的无意义分割符
-//     if (buttons_.length > 0 && buttons_[buttons_.length - 1].button !== 'separator') {
-//       buttons_.push({ parent: null, children: null, button: 'separator' });
-//     }
-//   }
-// }
+extractButton(modelValue.value);
 
 const buttons_ = <any>[];
 const handleChildrenSeparator = (arr) => {
@@ -285,8 +252,8 @@ const handleChildrenSeparator = (arr) => {
 };
 const handleButtons = () => {
   buttons_.splice(0, buttons_.length);
-  for (let i = 0; i < props.buttons.length; i++) {
-    const btn: any = props.buttons[i];
+  for (let i = 0; i < modelValue.value.length; i++) {
+    const btn: any = modelValue.value[i];
     if (i === 0 && typeof btn === 'string' && btn === 'separator') {
       // 按钮数组第一个元素为分割符时直接跳过
       continue;
@@ -362,17 +329,21 @@ const reset = (currentWidth) => {
 };
 
 const baseActionsComputed = computed(() => {
-  localFlag.value;
+  if (localFlag.value) {
+    return baseActions.value;
+  }
   return baseActions.value;
 });
 const moreActionsComputed = computed(() => {
-  localFlag.value;
+  if (localFlag.value) {
+    return moreActions.value;
+  }
   return moreActions.value;
 });
 
 eventBus.on('onLocaleChanged', () => {
   nextTick(() => {
-    extractButton(props.buttons);
+    extractButton(modelValue.value);
     handleButtons();
     baseActions.value = buttons_;
     isActionWidthInitializedRef.value = false;
@@ -381,15 +352,6 @@ eventBus.on('onLocaleChanged', () => {
     }
   });
 });
-// onUpdated(() => {
-//   console.info('onupdated====', props.buttons);
-// });
-// watch(
-//   () => props.buttons.map((item) => item['label']),
-//   (newVal, oldVal) => {
-//     console.info('watch====', newVal);
-//   },
-// );
 
 const loadingComputed = computed(() => {
   return function (btn) {
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages.json b/io.sc.platform.core.frontend/src/platform/i18n/messages.json
index 64d9f317..86c8a475 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages.json
@@ -124,6 +124,7 @@
 
   "action.query": "Query",
   "action.moreQueryConditions": "More Query Conditions",
+  "action.advancedQuery": "Advanced Query",
   "action.reset": "Reset",
   "action.refresh": "Refresh",
   "action.addNew": "Add New",
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json b/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
index b9e5b767..4d09d301 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
@@ -124,6 +124,7 @@
 
   "action.query": "查詢",
   "action.moreQueryConditions": "更多查詢條件",
+  "action.advancedQuery": "高级查詢",
   "action.reset": "重置",
   "action.refresh": "刷新",
   "action.addNew": "新增",
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json b/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
index 96a44567..a67e3554 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
@@ -124,6 +124,7 @@
 
   "action.query": "查询",
   "action.moreQueryConditions": "更多查询条件",
+  "action.advancedQuery": "高级查询",
   "action.reset": "重置",
   "action.refresh": "刷新",
   "action.addNew": "新增",