From f6d6b41546f364f87966ad424c13602fe489d4bd Mon Sep 17 00:00:00 2001
From: likunming <likunming@163.com>
Date: Fri, 6 Sep 2024 09:39:52 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E8=A1=A8=E5=8D=95=E5=85=83=E7=B4=A0?=
 =?UTF-8?q?=E5=A4=A7=E6=9B=B4=E6=96=B0=202=E3=80=81=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6API=E8=B0=83=E6=95=B4=E5=8F=8A=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/index.ts                   |    2 -
 .../src/mock/api/sample/params.json           |  232 ++++
 .../components/checkbox/WCheckbox.vue         |  104 ++
 .../components/checkbox/WCheckboxGroup.vue    |  114 ++
 .../components/code-mirror/WCodeMirror.vue    |  321 +++++
 .../w-code-mirror/PlaceholderPlugin.ts        |   76 ++
 .../platform/components/color/WColorInput.vue |  128 ++
 .../components/color/WColorInputPalette.vue   |  148 +++
 .../platform/components/color/quasarColors.ts |  214 +++
 .../src/platform/components/cron/WCron.vue    |  138 ++
 .../cron/w-cron-segment/DaySegment.vue        |  251 ++++
 .../cron/w-cron-segment/HourSegment.vue       |  185 +++
 .../cron/w-cron-segment/MinuteSegment.vue     |  185 +++
 .../cron/w-cron-segment/MonthSegment.vue      |  197 +++
 .../cron/w-cron-segment/SecondSegment.vue     |  185 +++
 .../cron/w-cron-segment/WeekSegment.vue       |  233 ++++
 .../cron/w-cron-segment/YearSegment.vue       |   93 ++
 .../src/platform/components/date/WDate.vue    |   78 ++
 .../platform/components/date/WDateRange.vue   |   88 ++
 .../src/platform/components/file/WFile.vue    |   70 +
 .../src/platform/components/form/FormField.ts |   92 ++
 .../src/platform/components/form/WForm.vue    |   60 +-
 .../platform/components/form/WForm_bak.vue    |  320 +++++
 .../components/form/elements/WCheckbox.vue    |   70 -
 .../components/form/elements/WColorInput.vue  |  205 ---
 .../form/elements/WColorInputPalette.vue      |  440 ------
 .../components/form/elements/WDate.vue        |  161 ---
 .../components/form/elements/WFile.vue        |  145 --
 .../components/form/elements/WListGrid.vue    |   81 --
 .../components/form/elements/WNumber.vue      |  144 --
 .../components/form/elements/WOptionGroup.vue |   93 --
 .../components/form/elements/WPassword.vue    |  143 --
 .../components/form/elements/WPosition.vue    |  206 ---
 .../form/elements/WQueryCondition.vue         |    7 -
 .../components/form/elements/WSelect.vue      |  144 --
 .../form/elements/WSelectUserText.vue         |   99 --
 .../components/form/elements/WText.vue        |  142 --
 .../components/form/elements/WTextBtn.vue     |  155 ---
 .../components/form/elements/WTextarea.vue    |  142 --
 .../components/form/elements/WTreeSelect.vue  |  154 ---
 .../src/platform/components/grid/GridBody.vue |   38 +-
 .../platform/components/grid/GridConfig.vue   |    2 +-
 .../components/grid/GridEditToolbar.vue       |   79 +-
 .../platform/components/grid/GridEditor.vue   |   24 +-
 .../platform/components/grid/GridHeader.vue   |    2 +-
 .../src/platform/components/grid/GridTop.vue  |   82 +-
 .../platform/components/grid/TreeGridRow.vue  |   11 +-
 .../src/platform/components/grid/WGrid.vue    | 1177 ++++++++++-------
 .../src/platform/components/grid/ts/grid.ts   |    6 +-
 .../{form/elements => icon}/WIcon.vue         |  227 ++--
 .../elements => icon}/icons/bootstrap.json    |    0
 .../elements => icon}/icons/eva-icons.json    |    0
 .../icons/fontawesome-v6-icons-brands.json    |    0
 .../icons/fontawesome-v6-icons-regular.json   |    0
 .../icons/fontawesome-v6-icons-solid.json     |    0
 .../icons/material-icons-outlined.json        |    0
 .../icons/material-icons-rounded.json         |    0
 .../icons/material-icons-sharp.json           |    0
 .../icons/material-icons.json                 |    0
 .../icons/material-symbols-outlined.json      |    0
 .../icons/material-symbols-rounded.json       |    0
 .../icons/material-symbols-sharp.json         |    0
 .../src/platform/components/index.ts          |   59 +-
 .../src/platform/components/label/WLabel.vue  |    7 +
 .../platform/components/number/WNumber.vue    |   75 ++
 .../components/password/WPassword.vue         |   66 +
 .../components/position/WPosition.vue         |  141 ++
 .../src/platform/components/radio/WRadio.vue  |  119 ++
 .../components/select/WGridSelect.vue         |  272 ++++
 .../components/select/WInputSelect.vue        |  153 +++
 .../platform/components/select/WOrgSelect.vue |  259 ++++
 .../platform/components/select/WSelect.vue    |   66 +
 .../components/select/WUserSelect.vue         |  304 +++++
 .../components/text-editor/WTextEditor.vue    |   85 ++
 .../src/platform/components/text/WText.vue    |   80 ++
 .../components/textarea/WTextarea.vue         |   65 +
 .../src/platform/index.ts                     |    7 +-
 .../src/routes/routes.json                    |   16 +-
 .../src/views/Editor.vue                      |   88 +-
 .../src/views/likm/Form.vue                   |  365 ++---
 .../src/views/likm/Grid.vue                   |  569 +-------
 .../src/views/likm/TreeGrid.vue               |   65 +-
 .../src/mock/api/sample/params.json           |  232 ++++
 .../build.gradle                              |    5 +
 .../gradle.properties                         |    0
 .../plugins/jdbc-connection-template.json     |   10 +
 .../webpack.env.serve.cjs                     |    2 +-
 87 files changed, 6739 insertions(+), 4064 deletions(-)
 create mode 100644 io.sc.platform.core.frontend/src/mock/api/sample/params.json
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckbox.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckboxGroup.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/code-mirror/WCodeMirror.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/code-mirror/w-code-mirror/PlaceholderPlugin.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/color/WColorInput.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/color/WColorInputPalette.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/color/quasarColors.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/cron/WCron.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/DaySegment.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/HourSegment.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/MinuteSegment.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/MonthSegment.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/SecondSegment.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/WeekSegment.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/YearSegment.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/date/WDate.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/date/WDateRange.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/file/WFile.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/form/FormField.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/form/WForm_bak.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInput.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInputPalette.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WFile.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WListGrid.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WOptionGroup.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WPassword.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WPosition.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WQueryCondition.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WSelectUserText.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WTreeSelect.vue
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/WIcon.vue (59%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/bootstrap.json (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/eva-icons.json (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/fontawesome-v6-icons-brands.json (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/fontawesome-v6-icons-regular.json (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/fontawesome-v6-icons-solid.json (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/material-icons-outlined.json (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/material-icons-rounded.json (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/material-icons-sharp.json (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/material-icons.json (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/material-symbols-outlined.json (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/material-symbols-rounded.json (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{form/elements => icon}/icons/material-symbols-sharp.json (100%)
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/label/WLabel.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/number/WNumber.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/password/WPassword.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/position/WPosition.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/radio/WRadio.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/select/WGridSelect.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/select/WInputSelect.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/select/WOrgSelect.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/select/WSelect.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/select/WUserSelect.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/text-editor/WTextEditor.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/text/WText.vue
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/textarea/WTextarea.vue
 create mode 100644 io.sc.platform.core.frontend/template-project/src/mock/api/sample/params.json
 create mode 100644 io.sc.platform.jdbc.driver.oceanbase/build.gradle
 create mode 100644 io.sc.platform.jdbc.driver.oceanbase/gradle.properties
 create mode 100644 io.sc.platform.jdbc.driver.oceanbase/src/main/resources/META-INF/platform/plugins/jdbc-connection-template.json

diff --git a/io.sc.platform.core.frontend/src/components/index.ts b/io.sc.platform.core.frontend/src/components/index.ts
index 82b32f86..06378e8d 100644
--- a/io.sc.platform.core.frontend/src/components/index.ts
+++ b/io.sc.platform.core.frontend/src/components/index.ts
@@ -5,7 +5,6 @@
 import component_testcase_openNoMenuRoute from '@/views/testcase/route/OpenNoMenuRoute.vue';
 import component_testcase_noMenuRoute from '@/views/testcase/route/NoMenuRoute.vue';
 import component_testcase_mathEditor from '@/views/testcase/math/MathEditor.vue';
-import component_testcase_mathEditorForm from '@/views/testcase/math/MathEditorForm.vue';
 import component_testcase_form from '@/views/testcase/form/form.vue';
 import component_testcase_codemirror from '@/views/testcase/code-mirror/code-mirror.vue';
 import component_testcase_loading from '@/views/testcase/loading/loading.vue';
@@ -26,7 +25,6 @@ const localComponents = {
   'component.testcase.openNoMenuRoute': component_testcase_openNoMenuRoute,
   'component.testcase.noMenuRoute': component_testcase_noMenuRoute,
   'component.testcase.mathEditor': component_testcase_mathEditor,
-  'component.testcase.mathEditorForm': component_testcase_mathEditorForm,
   'component.testcase.form': component_testcase_form,
   'component.testcase.codemirror': component_testcase_codemirror,
   'component.testcase.loading': component_testcase_loading,
diff --git a/io.sc.platform.core.frontend/src/mock/api/sample/params.json b/io.sc.platform.core.frontend/src/mock/api/sample/params.json
new file mode 100644
index 00000000..0706c330
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/mock/api/sample/params.json
@@ -0,0 +1,232 @@
+{
+  "enable": true,
+  "url": "/api/rwa/params/isc/fetchParams?pageable=false&sortBy=sortNo",
+  "method": "get",
+  "response": {
+    "code" : 200,
+    "messageI18nKey" : "success",
+    "message" : "success",
+    "data" : [ {
+      "jpaVersion" : null,
+      "dataComeFrom" : "INPUT",
+      "creator" : "admin",
+      "createDate" : "2023-09-05 02:02:14",
+      "lastModifier" : "admin",
+      "lastModifyDate" : "2023-09-05 02:02:14",
+      "corporationCode" : null,
+      "id" : "2268c3e2-c03f-4d8a-8bcd-e37d24cf955e",
+      "name" : "银行参数",
+      "parent" : null,
+      "children" : [ ],
+      "icon" : "folder",
+      "isFolder" : true,
+      "sortNo" : null,
+      "isDefault" : false,
+      "pageType" : null,
+      "templateId" : null,
+      "routeName" : null,
+      "routeQuery" : null
+    }, {
+      "jpaVersion" : null,
+      "dataComeFrom" : "INPUT",
+      "creator" : "admin",
+      "createDate" : "2023-08-30 08:00:00",
+      "lastModifier" : "admin",
+      "lastModifyDate" : "2023-08-30 08:00:00",
+      "corporationCode" : null,
+      "id" : "BIII",
+      "name" : "BIII参数",
+      "parent" : null,
+      "children" : [ {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : "admin",
+        "createDate" : "2024-02-26 17:34:22",
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-26 17:34:22",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "478b6c43-ca5b-45c4-a0cb-14715f45c98c",
+        "name" : "信用风险-表内风险权重参数表",
+        "parent" : "BIII",
+        "ticked" : true,
+        "children" : [ ],
+        "icon" : "calendar_month",
+        "isFolder" : false,
+        "sortNo" : 100,
+        "isDefault" : true,
+        "pageType" : "TEMPLATE",
+        "templateId" : "47442edb-7b0d-4dc4-ab71-755ddbae71bf",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : null,
+        "createDate" : null,
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-27 15:41:34",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "BWFXQZ",
+        "name" : "信用风险-表外主体权重参数表",
+        "parent" : "BIII",
+        "children" : [ ],
+        "icon" : "calendar_today",
+        "isFolder" : false,
+        "sortNo" : 200,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "1b42b129-b683-4ac0-a8dc-3d39db1eb836",
+        "routeName" : null,
+        "routeQuery" : null
+      } ],
+      "icon" : "folder",
+      "isFolder" : true,
+      "sortNo" : 100,
+      "isDefault" : false,
+      "pageType" : null,
+      "templateId" : null,
+      "routeName" : null,
+      "routeQuery" : null
+    }, {
+      "jpaVersion" : null,
+      "dataComeFrom" : "INPUT",
+      "creator" : "admin",
+      "createDate" : "2024-02-28 13:56:36",
+      "lastModifier" : "admin",
+      "lastModifyDate" : "2024-02-28 13:56:36",
+      "corporationCode" : "_PRIMARY_",
+      "id" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+      "name" : "交易对手信用风险",
+      "parent" : null,
+      "children" : [ {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : "admin",
+        "createDate" : "2024-02-28 14:03:45",
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 14:03:45",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "fac9819a-84a7-46bd-9e89-47e07ebeb31b",
+        "name" : "交易对手信用风险设置",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "settings_suggest",
+        "isFolder" : false,
+        "sortNo" : 100,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "61da07af-351f-4c70-9e58-0ab99ca1d730",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : "admin",
+        "createDate" : "2024-02-28 14:55:57",
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 14:55:57",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "2389c168-12c5-4955-b31f-5090f9dcea4b",
+        "name" : "SACCR监管参数配置",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "settings_applications",
+        "isFolder" : false,
+        "sortNo" : 200,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "df6de052-7f56-42bd-895b-ca09088e0906",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : null,
+        "createDate" : null,
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 16:13:48",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "ec48aefe-1181-4764-9a97-b149f20b520e",
+        "name" : "CVA行业类别映射",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "linear_scale",
+        "isFolder" : false,
+        "sortNo" : 300,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "125dc90f-15cb-4b82-961b-1b7361f0df5e",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : null,
+        "createDate" : null,
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 16:31:40",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "a315ede8-3438-4d00-a60a-c9ef2babc0b1",
+        "name" : "货币优先顺序",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "currency_yen",
+        "isFolder" : false,
+        "sortNo" : 400,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "3fcee541-43f6-480e-827b-6cf021f748eb",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : "admin",
+        "createDate" : "2024-02-28 16:45:56",
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 16:45:56",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "8865a5dd-0a88-4362-9ba9-192009072ad0",
+        "name" : "CVA评级等级映射",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "format_list_numbered",
+        "isFolder" : false,
+        "sortNo" : 500,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "637eea6b-1fcf-4977-a56b-9653b0703c31",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : "admin",
+        "createDate" : "2024-02-28 17:08:39",
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 17:08:39",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "62021407-ac21-4fde-a37d-e53865b94aa5",
+        "name" : "CVA权重映射",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "percent",
+        "isFolder" : false,
+        "sortNo" : 600,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "dacd1de2-8492-4123-b1fb-f8abb4f6346b",
+        "routeName" : null,
+        "routeQuery" : null
+      } ],
+      "icon" : "folder",
+      "isFolder" : true,
+      "sortNo" : 300,
+      "isDefault" : false,
+      "pageType" : null,
+      "templateId" : null,
+      "routeName" : null,
+      "routeQuery" : null
+    } ]
+  }
+}
diff --git a/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckbox.vue b/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckbox.vue
new file mode 100644
index 00000000..f602a48a
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckbox.vue
@@ -0,0 +1,104 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)" :class="props.outlined ? 'w-checkbox' : ''">
+    <template v-if="props.outlined">
+      <q-field
+        ref="checkboxRef"
+        v-model="modelValue"
+        :hide-bottom-space="true"
+        :hide-hint="true"
+        v-bind="attrs"
+        :outlined="props.outlined"
+        :borderless="!props.outlined"
+        :stack-label="true"
+        :dense="true"
+        :rules="FieldMethods.getRules(props, modelValue, checkboxRef, undefined)"
+        :readonly="FieldMethods.getReadOnly(props, modelValue)"
+        :disable="FieldMethods.getDisable(props, modelValue)"
+        @update:model-value="fieldMethodsClass.updateValue"
+      >
+        <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+        <template #append>
+          <q-checkbox
+            v-model="modelValue"
+            :readonly="FieldMethods.getReadOnly(props, modelValue)"
+            :disable="FieldMethods.getDisable(props, modelValue)"
+            @update:model-value="fieldMethodsClass.updateValue"
+          ></q-checkbox>
+        </template>
+      </q-field>
+    </template>
+    <template v-else>
+      <q-checkbox
+        ref="checkboxRef"
+        v-model="modelValue"
+        v-bind="attrs"
+        :readonly="FieldMethods.getReadOnly(props, modelValue)"
+        :disable="FieldMethods.getDisable(props, modelValue)"
+        @update:model-value="fieldMethodsClass.updateValue"
+      ></q-checkbox>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const checkboxRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel({ type: Boolean, default: false });
+
+interface FieldProps extends FormFieldProps {
+  outlined?: boolean;
+  borderless?: boolean;
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  outlined: true,
+  showIf: true,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    if (props.outlined && checkboxRef.value) {
+      return checkboxRef.value.validate();
+    }
+    return true;
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = false;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
+
+<style lang="css">
+.w-checkbox .q-field--dense .q-field__label {
+  font-size: 18px;
+  top: 18px;
+}
+.w-checkbox .q-field__marginal {
+  font-size: 16px;
+  color: #0f0f0f;
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckboxGroup.vue b/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckboxGroup.vue
new file mode 100644
index 00000000..8d560b76
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckboxGroup.vue
@@ -0,0 +1,114 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)" :class="props.simple ? 'w-checkbox-group' : ''">
+    <q-field
+      ref="checkboxGroupRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      v-bind="attrs"
+      :outlined="props.outlined"
+      :borderless="!props.outlined"
+      :stack-label="true"
+      :dense="true"
+      :rules="FieldMethods.getRules(props, modelValue, checkboxGroupRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-if="!props.simple" #control>
+        <div class="pt-[5px]">
+          <q-option-group
+            v-model="modelValue"
+            type="checkbox"
+            :dense="props.dense"
+            :options="props.options"
+            :inline="props.inline"
+            :readonly="FieldMethods.getReadOnly(props, modelValue)"
+            :disable="FieldMethods.getDisable(props, modelValue)"
+          />
+        </div>
+      </template>
+      <template v-else #append>
+        <q-option-group
+          v-model="modelValue"
+          type="checkbox"
+          :dense="props.dense"
+          :options="props.options"
+          :inline="props.inline"
+          :readonly="FieldMethods.getReadOnly(props, modelValue)"
+          :disable="FieldMethods.getDisable(props, modelValue)"
+        />
+      </template>
+    </q-field>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const checkboxGroupRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<Array<string> | Array<number>>();
+
+interface FieldProps extends FormFieldProps {
+  dense?: boolean;
+  inline?: boolean;
+  outlined?: boolean;
+  borderless?: boolean;
+  simple?: boolean; // 是否简单选项的checkbox选项组，默认为是，将label与选项放在同一行，选项过多时使用该模式会导致很难看
+  options: Array<() => void>;
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  dense: true,
+  inline: true,
+  outlined: true,
+  simple: true,
+  options: () => {
+    return [];
+  },
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return checkboxGroupRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
+
+<style lang="css">
+.w-checkbox-group .q-field--dense .q-field__label {
+  font-size: 18px;
+  top: 18px;
+}
+.w-checkbox-group .q-field__marginal {
+  font-size: 16px;
+  color: #0f0f0f;
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/code-mirror/WCodeMirror.vue b/io.sc.platform.core.frontend/src/platform/components/code-mirror/WCodeMirror.vue
new file mode 100644
index 00000000..c00168ec
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/code-mirror/WCodeMirror.vue
@@ -0,0 +1,321 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-field
+      ref="fieldRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      style="position: relative"
+      :rules="FieldMethods.getRules(props, modelValue, fieldRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+      @focus.stop.prevent="focus"
+      @blur.stop.prevent="blur"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template #control>
+        <div v-if="editable && toolbar" class="w-full pt-2 border-b border-b-gray-200">
+          <Toolbar :source-code-editor="editorView" :user-defined-functions="userDefinedFunctions"></Toolbar>
+        </div>
+        <div
+          ref="codemirrorRef"
+          :style="`width:100%; padding-top: ${lineNumber ? 4 : 2}px; overflow: auto;`"
+          @focus.stop.prevent="() => {}"
+          @click.stop.prevent="() => {}"
+        ></div>
+      </template>
+      <template v-if="!Tools.isEmpty(modelValue) && attrs.button" #append>
+        <q-btn
+          round
+          dense
+          flat
+          v-bind="attrs.button"
+          :style="{
+            content: '',
+            position: 'absolute',
+            bottom: '5px',
+            right: '5px',
+          }"
+          @click.stop.prevent="buttonClick(attrs.button)"
+        />
+      </template>
+    </q-field>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs, onMounted, onUnmounted, watch } from 'vue';
+import { Tools } from '@/platform';
+import { EditorView } from '@codemirror/view';
+import { EditorState, StateEffect, Compartment } from '@codemirror/state';
+import * as view from '@codemirror/view';
+import * as language from '@codemirror/language';
+import * as commands from '@codemirror/commands';
+import * as search from '@codemirror/search';
+import * as autocomplete from '@codemirror/autocomplete';
+
+import { LanguageSupport } from '@codemirror/language';
+import { html, htmlLanguage } from '@codemirror/lang-html';
+import { java, javaLanguage } from '@codemirror/lang-java';
+import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
+import { json, jsonLanguage } from '@codemirror/lang-json';
+import { sql } from '@codemirror/lang-sql';
+import { xml, xmlLanguage } from '@codemirror/lang-xml';
+
+import PlaceholderPlugin from './w-code-mirror/PlaceholderPlugin';
+import Toolbar from '@/platform/components/math/toolbar/Toolbar.vue';
+
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const fieldRef = ref();
+const codemirrorRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+
+interface FieldProps extends FormFieldProps {
+  // 语言
+  lang?: string;
+  // 宽度
+  width?: number | string;
+  // 高度
+  height?: number | string;
+  // 行高
+  lineHeight?: number | string;
+  // 行数
+  rows?: number;
+  // 是否包含工具条
+  toolbar?: boolean;
+  // 是否可编辑
+  editable?: boolean;
+  // 是否允许自动换行
+  lineWrap?: boolean;
+  // tab size
+  tabSize?: number;
+  // 是否显示行号
+  lineNumber?: boolean;
+  // 是否允许回车换行
+  lineBreak?: boolean;
+  // 是否开启变量替换
+  placeholder?: boolean;
+  autoCompletion?: () => void;
+  userDefinedFunctions?: Array<() => void>;
+  activateOnCompletion?: () => void;
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  lang: 'json',
+  width: '100%',
+  height: undefined,
+  lineHeight: 20,
+  rows: 4,
+  toolbar: true,
+  editable: true,
+  lineWrap: false,
+  tabSize: 4,
+  lineNumber: false,
+  lineBreak: true,
+  placeholder: false,
+  autoCompletion: undefined,
+  userDefinedFunctions: () => {
+    return [];
+  },
+  activateOnCompletion: undefined,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return fieldRef.value.validate();
+  };
+  setValue = (value_) => {
+    editorView.dispatch({ changes: { from: 0, to: editorView.state.doc.length, insert: value_ } });
+  };
+  getValue = () => {
+    return editorView.state.doc.toString();
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+const basicSetup = [
+  EditorState.allowMultipleSelections.of(true),
+
+  //view.lineNumbers(),
+  //view.highlightActiveLine(),
+  view.highlightActiveLineGutter(),
+  view.highlightSpecialChars(),
+  view.drawSelection(),
+  view.dropCursor(),
+  view.rectangularSelection(),
+  view.crosshairCursor(),
+
+  commands.history(),
+
+  //language.foldGutter(),
+  language.indentOnInput(),
+  language.syntaxHighlighting(language.defaultHighlightStyle, { fallback: true }),
+  language.bracketMatching(),
+
+  //search.highlightSelectionMatches(),
+
+  view.keymap.of([
+    ...commands.defaultKeymap,
+    ...commands.historyKeymap,
+    ...language.foldKeymap,
+    ...autocomplete.completionKeymap,
+    ...autocomplete.closeBracketsKeymap,
+    ...search.searchKeymap,
+    commands.indentWithTab,
+  ]),
+];
+
+const getLanguage = (lang: string): LanguageSupport => {
+  lang = lang || 'json';
+  switch (lang.toLowerCase()) {
+    case 'html':
+      return html();
+    case 'java':
+      return java();
+    case 'javascript':
+      return javascript();
+    case 'json':
+      return json();
+    case 'sql':
+      return sql();
+    case 'xml':
+      return xml();
+    default:
+      return json();
+  }
+};
+
+let editorView;
+let isFocus = false;
+
+if (props.lineNumber) {
+  // 行号
+  basicSetup.push(view.lineNumbers());
+}
+if (props.autoCompletion) {
+  // 自动完成
+  basicSetup.push(autocomplete.closeBrackets());
+  basicSetup.push(
+    autocomplete.autocompletion({ override: [props.autoCompletion], activateOnCompletion: props.activateOnCompletion, maxRenderedOptions: 1000 }),
+  );
+}
+if (props.placeholder) {
+  // 变量标识替换
+  basicSetup.push(PlaceholderPlugin);
+}
+
+if (props.lineWrap) {
+  basicSetup.push(EditorView.lineWrapping);
+}
+
+// 是否可编辑
+basicSetup.push(EditorView.editable.of(props.editable));
+
+onMounted(() => {
+  if (codemirrorRef.value) {
+    let language = new Compartment();
+    let tabSize = new Compartment();
+    editorView = new EditorView({
+      extensions: [
+        basicSetup,
+        language.of(getLanguage(props.lang)),
+        tabSize.of(EditorState.tabSize.of(props.tabSize)),
+        EditorState.readOnly.of(FieldMethods.getReadOnly(props, modelValue.value)),
+        EditorView.theme({
+          '&': {
+            outline: 'none !important',
+            width: Tools.px(props.width),
+            height: props.height ? Tools.px(props.height) : props.rows * 20 + (props.lineNumber ? 8 : 6) + 'px',
+          },
+          '.cm-content': {
+            'line-height': props.lineHeight + 'px',
+          },
+        }),
+
+        // 以下代码可以添加内容变化后的操作, 为避免重复操作, 更新操作放到 blur 方法中了
+        EditorView.updateListener.of(function (e) {
+          // emits('update:modelValue', e.state.doc.toString());
+          let content = e.state.doc.toString();
+          if (!props.lineBreak) {
+            content = content?.replace(/[\r\n]/g, '');
+          }
+          //updateModelValue(content);
+        }),
+      ],
+      parent: codemirrorRef.value,
+      doc: modelValue.value,
+    });
+    watch(
+      () => modelValue.value,
+      () => {
+        // 当未获得焦点时,更新变更, 当获得焦点时不能更新
+        if (!isFocus) {
+          let content = modelValue.value;
+          if (!props.lineBreak && !Tools.isEmpty(content)) {
+            content = content.replace(/[\r\n]/g, '');
+          }
+          editorView.dispatch({ changes: { from: 0, to: editorView.state.doc.length, insert: content } });
+        }
+      },
+    );
+  }
+});
+
+onUnmounted(() => {
+  editorView.destroy();
+});
+
+const focus = () => {
+  isFocus = true;
+};
+
+const blur = () => {
+  isFocus = false;
+  let content = editorView.state.doc.toString();
+  if (Tools.isUndefinedOrNull(content)) {
+    modelValue.value = '';
+  }
+  const reg = /\$\{(.+?)\}\.\$\{(.+?)\}/g;
+  while (reg.test(content)) {
+    content = content.replace(reg, '${$1.$2}');
+  }
+  modelValue.value = content;
+};
+
+const configure = (values) => {
+  editorView.dispatch({ effects: StateEffect.reconfigure.of(values) });
+};
+
+const buttonClick = (button) => {
+  if (button.click) {
+    button.click({
+      value: modelValue.value,
+      form: props['form'],
+    });
+  }
+};
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+  configure,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/code-mirror/w-code-mirror/PlaceholderPlugin.ts b/io.sc.platform.core.frontend/src/platform/components/code-mirror/w-code-mirror/PlaceholderPlugin.ts
new file mode 100644
index 00000000..f8ba5a69
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/code-mirror/w-code-mirror/PlaceholderPlugin.ts
@@ -0,0 +1,76 @@
+import { EditorView, ViewPlugin, ViewUpdate, MatchDecorator, Decoration, DecorationSet, WidgetType } from '@codemirror/view';
+
+class PlaceholderWidget extends WidgetType {
+  constructor(name) {
+    super();
+    this.name = name;
+  }
+
+  eq(other) {
+    return this.name == other.name;
+  }
+
+  toDOM() {
+    const container = document.createElement('span');
+    container.className = 'px-0.5';
+
+    const elt = document.createElement('span');
+    elt.setAttribute('placeholder', true);
+    elt.className = 'p-0.5 border border-gray-800 rounded-md';
+    elt.textContent = this.name;
+
+    container.appendChild(elt);
+    return container;
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+const placeholderMatcher = new MatchDecorator({
+  regexp: /\$\{(.+?)\}/g,
+  decoration: (match) =>
+    Decoration.replace({
+      widget: new PlaceholderWidget(match[1]),
+    }),
+});
+
+const placeholderPlugin = ViewPlugin.fromClass(
+  class {
+    placeholders: DecorationSet;
+    constructor(view: EditorView) {
+      this.placeholders = placeholderMatcher.createDeco(view);
+    }
+    update(update: ViewUpdate) {
+      this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders);
+    }
+  },
+  {
+    decorations: (instance) => instance.placeholders,
+    provide: (plugin) =>
+      EditorView.atomicRanges.of((view) => {
+        return view.plugin(plugin)?.placeholders || Decoration.none;
+      }),
+    eventHandlers: {
+      mouseover: (e, view) => {
+        const target = e.target as HTMLElement;
+        if (target.tagName.toLowerCase() === 'span' && target.getAttribute('placeholder')) {
+          target.className = 'p-0.5 border border-orange-400 rounded-md';
+        }
+      },
+      mouseout: (e, view) => {
+        const target = e.target as HTMLElement;
+        if (target.tagName.toLowerCase() === 'span' && target.getAttribute('placeholder')) {
+          target.className = 'p-0.5 border border-gray-800 rounded-md';
+        }
+      },
+      contextmenu: (e, view) => {
+        e.preventDefault();
+        console.log(view);
+      },
+    },
+  },
+);
+
+export default placeholderPlugin;
diff --git a/io.sc.platform.core.frontend/src/platform/components/color/WColorInput.vue b/io.sc.platform.core.frontend/src/platform/components/color/WColorInput.vue
new file mode 100644
index 00000000..89f66435
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/color/WColorInput.vue
@@ -0,0 +1,128 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="colorRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="FieldMethods.getRules(props, modelValue, colorRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-if="!props['form'] || (props['form'] && props['form'].getStatus() !== 'view')" #append>
+        <!-- 选择颜色按钮 -->
+        <q-btn
+          icon="square"
+          size="10px"
+          padding="2px"
+          flat
+          square
+          unelevated
+          :title="$t('select')"
+          :style="{ border: '1px solid #e5e7eb', color: modelValue, 'background-color': computedStoreBackgroundColorValue }"
+        >
+          <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]">
+            <q-color
+              v-model="modelValue"
+              :default-value="modelValue"
+              format-model="hex"
+              default-view="palette"
+              style="max-width: 250px"
+              @update:model-value="fieldMethodsClass.updateValue"
+            />
+          </q-popup-proxy>
+        </q-btn>
+        <!-- 恢复默认值按钮 -->
+        <q-btn
+          v-if="restore"
+          icon="bi-arrow-counterclockwise"
+          size="10px"
+          padding="2px"
+          flat
+          square
+          unelevated
+          :title="$t('restore')"
+          :style="{ 'margin-left': '5px', border: '1px solid #e5e7eb', color: restoreValue, 'background-color': computedStoreBackgroundColorValue }"
+          @click="restoreDefaultValue"
+        ></q-btn>
+      </template>
+    </q-input>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, toRaw, computed, useAttrs, onBeforeMount } from 'vue';
+import { Tools } from '@/platform';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const colorRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+
+const isShow = ref(false);
+const defaultValue = '#000000';
+const restoreValue = toRaw(modelValue.value || defaultValue);
+
+interface FieldProps extends FormFieldProps {
+  restore?: boolean;
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  restore: false,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    isShow.value = false;
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return colorRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = restoreValue;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+const computedStoreBackgroundColorValue = computed(() => {
+  const color: string = restoreValue;
+  if (color.toLowerCase() === 'white' || color.toLowerCase() === '#ffffff' || color.toLowerCase() === '#fff') {
+    return '#eee';
+  }
+  return undefined;
+});
+
+const restoreDefaultValue = () => {
+  modelValue.value = restoreValue;
+  fieldMethodsClass.updateValue(restoreValue);
+};
+
+onBeforeMount(() => {
+  if (Tools.isEmpty(modelValue.value)) {
+    modelValue.value = defaultValue;
+  }
+});
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/color/WColorInputPalette.vue b/io.sc.platform.core.frontend/src/platform/components/color/WColorInputPalette.vue
new file mode 100644
index 00000000..95e67e43
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/color/WColorInputPalette.vue
@@ -0,0 +1,148 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="colorRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="FieldMethods.getRules(props, modelValue, colorRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-if="!props['form'] || (props['form'] && props['form'].getStatus() !== 'view')" #append>
+        <!-- 选择颜色按钮 -->
+        <q-btn
+          icon="bi-palette"
+          size="10px"
+          padding="2px"
+          flat
+          square
+          unelevated
+          :title="$t('select')"
+          :class="`text-${modelValue}`"
+          :style="{ border: '1px solid #e5e7eb', 'background-color': computedBackgroundColorValue }"
+        >
+          <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]">
+            <div v-for="(colors, index) in quasarColors" :key="index" class="row">
+              <div
+                v-for="color in colors"
+                :key="`${color}`"
+                :class="`bg-${color}`"
+                style="min-width: 20px; max-width: 20px; min-height: 20px; max-height: 20px"
+                @click="colorClick(`${color}`)"
+              >
+                <q-tooltip> {{ color }}</q-tooltip>
+              </div>
+            </div>
+          </q-popup-proxy>
+        </q-btn>
+        <!-- 恢复默认值按钮 -->
+        <q-btn
+          v-if="restore"
+          icon="bi-arrow-counterclockwise"
+          size="10px"
+          padding="2px"
+          flat
+          square
+          unelevated
+          :title="$t('restore')"
+          :class="`text-${restoreValue}`"
+          :style="{ 'margin-left': '5px', border: '1px solid #e5e7eb', 'background-color': computedStoreBackgroundColorValue }"
+          @click="restoreDefaultValue"
+        ></q-btn>
+      </template>
+    </q-input>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, toRaw, computed, useAttrs, onBeforeMount } from 'vue';
+import { Tools } from '@/platform';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+import { quasarColors } from './quasarColors';
+
+const colorRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+
+const isShow = ref(false);
+const defaultValue = 'black';
+const restoreValue = toRaw(modelValue.value || defaultValue);
+
+interface FieldProps extends FormFieldProps {
+  restore?: boolean;
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  restore: false,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    modelValue.value = value_;
+    isShow.value = false;
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return colorRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = restoreValue;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+const computedBackgroundColorValue = computed(() => {
+  if (!Tools.isEmpty(modelValue.value)) {
+    const color: string = toRaw(modelValue.value);
+    if (color.toLowerCase() === 'white' || color.toLowerCase() === '#ffffff' || color.toLowerCase() === '#fff') {
+      return '#eee';
+    }
+  }
+  return undefined;
+});
+
+const computedStoreBackgroundColorValue = computed(() => {
+  const color: string = restoreValue;
+  if (color.toLowerCase() === 'white' || color.toLowerCase() === '#ffffff' || color.toLowerCase() === '#fff') {
+    return '#eee';
+  }
+  return undefined;
+});
+
+const colorClick = (value) => {
+  fieldMethodsClass.updateValue(value);
+};
+
+const restoreDefaultValue = () => {
+  fieldMethodsClass.updateValue(restoreValue);
+};
+
+onBeforeMount(() => {
+  if (Tools.isEmpty(modelValue.value)) {
+    modelValue.value = defaultValue;
+  }
+});
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/color/quasarColors.ts b/io.sc.platform.core.frontend/src/platform/components/color/quasarColors.ts
new file mode 100644
index 00000000..9bcce93c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/color/quasarColors.ts
@@ -0,0 +1,214 @@
+export const quasarColors = [
+  ['red', 'red-1', 'red-2', 'red-3', 'red-4', 'red-5', 'red-6', 'red-7', 'red-8', 'red-9', 'red-10', 'red-11', 'red-12', 'red-13', 'red-14'],
+  ['pink', 'pink-1', 'pink-2', 'pink-3', 'pink-4', 'pink-5', 'pink-6', 'pink-7', 'pink-8', 'pink-9', 'pink-10', 'pink-11', 'pink-12', 'pink-13', 'pink-14'],
+  [
+    'purple',
+    'purple-1',
+    'purple-2',
+    'purple-3',
+    'purple-4',
+    'purple-5',
+    'purple-6',
+    'purple-7',
+    'purple-8',
+    'purple-9',
+    'purple-10',
+    'purple-11',
+    'purple-12',
+    'purple-13',
+    'purple-14',
+  ],
+  [
+    'deep-purple',
+    'deep-purple-1',
+    'deep-purple-2',
+    'deep-purple-3',
+    'deep-purple-4',
+    'deep-purple-5',
+    'deep-purple-6',
+    'deep-purple-7',
+    'deep-purple-8',
+    'deep-purple-9',
+    'deep-purple-10',
+    'deep-purple-11',
+    'deep-purple-12',
+    'deep-purple-13',
+    'deep-purple-14',
+  ],
+  [
+    'indigo',
+    'indigo-1',
+    'indigo-2',
+    'indigo-3',
+    'indigo-4',
+    'indigo-5',
+    'indigo-6',
+    'indigo-7',
+    'indigo-8',
+    'indigo-9',
+    'indigo-10',
+    'indigo-11',
+    'indigo-12',
+    'indigo-13',
+    'indigo-14',
+  ],
+  ['blue', 'blue-1', 'blue-2', 'blue-3', 'blue-4', 'blue-5', 'blue-6', 'blue-7', 'blue-8', 'blue-9', 'blue-10', 'blue-11', 'blue-12', 'blue-13', 'blue-14'],
+  [
+    'light-blue',
+    'light-blue-1',
+    'light-blue-2',
+    'light-blue-3',
+    'light-blue-4',
+    'light-blue-5',
+    'light-blue-6',
+    'light-blue-7',
+    'light-blue-8',
+    'light-blue-9',
+    'light-blue-10',
+    'light-blue-11',
+    'light-blue-12',
+    'light-blue-13',
+    'light-blue-14',
+  ],
+  ['cyan', 'cyan-1', 'cyan-2', 'cyan-3', 'cyan-4', 'cyan-5', 'cyan-6', 'cyan-7', 'cyan-8', 'cyan-9', 'cyan-10', 'cyan-11', 'cyan-12', 'cyan-13', 'cyan-14'],
+  ['teal', 'teal-1', 'teal-2', 'teal-3', 'teal-4', 'teal-5', 'teal-6', 'teal-7', 'teal-8', 'teal-9', 'teal-10', 'teal-11', 'teal-12', 'teal-13', 'teal-14'],
+  [
+    'green',
+    'green-1',
+    'green-2',
+    'green-3',
+    'green-4',
+    'green-5',
+    'green-6',
+    'green-7',
+    'green-8',
+    'green-9',
+    'green-10',
+    'green-11',
+    'green-12',
+    'green-13',
+    'green-14',
+  ],
+  [
+    'light-green',
+    'light-green-1',
+    'light-green-2',
+    'light-green-3',
+    'light-green-4',
+    'light-green-5',
+    'light-green-6',
+    'light-green-7',
+    'light-green-8',
+    'light-green-9',
+    'light-green-10',
+    'light-green-11',
+    'light-green-12',
+    'light-green-13',
+    'light-green-14',
+  ],
+  ['lime', 'lime-1', 'lime-2', 'lime-3', 'lime-4', 'lime-5', 'lime-6', 'lime-7', 'lime-8', 'lime-9', 'lime-10', 'lime-11', 'lime-12', 'lime-13', 'lime-14'],
+  [
+    'yellow',
+    'yellow-1',
+    'yellow-2',
+    'yellow-3',
+    'yellow-4',
+    'yellow-5',
+    'yellow-6',
+    'yellow-7',
+    'yellow-8',
+    'yellow-9',
+    'yellow-10',
+    'yellow-11',
+    'yellow-12',
+    'yellow-13',
+    'yellow-14',
+  ],
+  [
+    'amber',
+    'amber-1',
+    'amber-2',
+    'amber-3',
+    'amber-4',
+    'amber-5',
+    'amber-6',
+    'amber-7',
+    'amber-8',
+    'amber-9',
+    'amber-10',
+    'amber-11',
+    'amber-12',
+    'amber-13',
+    'amber-14',
+  ],
+  [
+    'orange',
+    'orange-1',
+    'orange-2',
+    'orange-3',
+    'orange-4',
+    'orange-5',
+    'orange-6',
+    'orange-7',
+    'orange-8',
+    'orange-9',
+    'orange-10',
+    'orange-11',
+    'orange-12',
+    'orange-13',
+    'orange-14',
+  ],
+  [
+    'deep-orange',
+    'deep-orange-1',
+    'deep-orange-2',
+    'deep-orange-3',
+    'deep-orange-4',
+    'deep-orange-5',
+    'deep-orange-6',
+    'deep-orange-7',
+    'deep-orange-8',
+    'deep-orange-9',
+    'deep-orange-10',
+    'deep-orange-11',
+    'deep-orange-12',
+    'deep-orange-13',
+    'deep-orange-14',
+  ],
+  [
+    'brown',
+    'brown-1',
+    'brown-2',
+    'brown-3',
+    'brown-4',
+    'brown-5',
+    'brown-6',
+    'brown-7',
+    'brown-8',
+    'brown-9',
+    'brown-10',
+    'brown-11',
+    'brown-12',
+    'brown-13',
+    'brown-14',
+  ],
+  ['grey', 'grey-1', 'grey-2', 'grey-3', 'grey-4', 'grey-5', 'grey-6', 'grey-7', 'grey-8', 'grey-9', 'grey-10', 'grey-11', 'grey-12', 'grey-13', 'grey-14'],
+  [
+    'blue-grey',
+    'blue-grey-1',
+    'blue-grey-2',
+    'blue-grey-3',
+    'blue-grey-4',
+    'blue-grey-5',
+    'blue-grey-6',
+    'blue-grey-7',
+    'blue-grey-8',
+    'blue-grey-9',
+    'blue-grey-10',
+    'blue-grey-11',
+    'blue-grey-12',
+    'blue-grey-13',
+    'blue-grey-14',
+  ],
+  ['white', 'black'],
+];
diff --git a/io.sc.platform.core.frontend/src/platform/components/cron/WCron.vue b/io.sc.platform.core.frontend/src/platform/components/cron/WCron.vue
new file mode 100644
index 00000000..84015d7d
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/cron/WCron.vue
@@ -0,0 +1,138 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="cronRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="FieldMethods.getRules(props, modelValue, cronRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      :v-bind="attrs"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-if="!props['form'] || (props['form'] && props['form'].getStatus() !== 'view')" #append>
+        <!-- 选择颜色按钮 -->
+        <q-btn icon="bi-pencil-square" padding="2px" flat square unelevated :title="$t('select')">
+          <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]" style="width: 800px">
+            <q-tabs v-model="selectedTab" no-caps>
+              <q-tab name="second" :label="$t('second')" />
+              <q-tab name="minute" :label="$t('minute')" />
+              <q-tab name="hour" :label="$t('hour')" />
+              <q-tab name="day" :label="$t('day')" />
+              <q-tab name="month" :label="$t('month')" />
+              <q-tab name="week" :label="$t('week')" />
+              <q-tab name="year" :label="$t('year')" />
+            </q-tabs>
+
+            <q-tab-panels v-model="selectedTab" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up" :keep-alive="true">
+              <q-tab-panel name="second">
+                <SecondSegment v-model="secondValueRef" @update:model-value="valueChanged"></SecondSegment>
+              </q-tab-panel>
+              <q-tab-panel name="minute">
+                <MinuteSegment v-model="minuteValueRef" @update:model-value="valueChanged"></MinuteSegment>
+              </q-tab-panel>
+              <q-tab-panel name="hour">
+                <HourSegment v-model="hourValueRef" @update:model-value="valueChanged"></HourSegment>
+              </q-tab-panel>
+              <q-tab-panel name="day">
+                <DaySegment v-model="dayValueRef" @update:model-value="valueChanged"></DaySegment>
+              </q-tab-panel>
+              <q-tab-panel name="month">
+                <MonthSegment v-model="monthValueRef" @update:model-value="valueChanged"></MonthSegment>
+              </q-tab-panel>
+              <q-tab-panel name="week">
+                <WeekSegment v-model="weekValueRef" @update:model-value="valueChanged"></WeekSegment>
+              </q-tab-panel>
+              <q-tab-panel name="year">
+                <YearSegment v-model="yearValueRef" @update:model-value="valueChanged"></YearSegment>
+              </q-tab-panel>
+            </q-tab-panels>
+          </q-popup-proxy>
+        </q-btn>
+      </template>
+    </q-input>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+import { Tools } from '@/platform';
+import SecondSegment from './w-cron-segment/SecondSegment.vue';
+import MinuteSegment from './w-cron-segment/MinuteSegment.vue';
+import HourSegment from './w-cron-segment/HourSegment.vue';
+import DaySegment from './w-cron-segment/DaySegment.vue';
+import MonthSegment from './w-cron-segment/MonthSegment.vue';
+import WeekSegment from './w-cron-segment/WeekSegment.vue';
+import YearSegment from './w-cron-segment/YearSegment.vue';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const cronRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+
+const isShow = ref(false);
+const selectedTab = ref('second');
+const splits = (modelValue.value || '').split(' ');
+const secondValueRef = ref(splits[0]);
+const minuteValueRef = ref(splits[1]);
+const hourValueRef = ref(splits[2]);
+const dayValueRef = ref(splits[3]);
+const monthValueRef = ref(splits[4]);
+const weekValueRef = ref(splits[5]);
+const yearValueRef = ref(splits[6]);
+
+interface FieldProps extends FormFieldProps {}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return cronRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+const valueChanged = () => {
+  const values = <any>[];
+  values.push(secondValueRef.value ? secondValueRef.value : '*');
+  values.push(minuteValueRef.value ? minuteValueRef.value : '*');
+  values.push(hourValueRef.value ? hourValueRef.value : '*');
+  values.push(dayValueRef.value ? dayValueRef.value : '*');
+  values.push(monthValueRef.value ? monthValueRef.value : '*');
+  values.push(weekValueRef.value ? weekValueRef.value : '*');
+  values.push(yearValueRef.value ? yearValueRef.value : '*');
+
+  const result = Tools.join(values, ' ');
+  modelValue.value = result;
+  fieldMethodsClass.updateValue(result);
+};
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/DaySegment.vue b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/DaySegment.vue
new file mode 100644
index 00000000..9af31937
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/DaySegment.vue
@@ -0,0 +1,251 @@
+<template>
+  <q-list dense style="width: 100%">
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.day.per') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="notSpecify" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.day.notSpecify') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="period" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.day.period.1') }}</span>
+            <q-input
+              v-model="periodFromRef"
+              type="number"
+              :disable="!periodFromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.day.period.2') }}</span>
+            <q-input
+              v-model="periodToRef"
+              type="number"
+              :disable="!periodToEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.day.period.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per2" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.day.per2.1') }}</span>
+            <q-input
+              v-model="per2FromRef"
+              type="number"
+              :disable="!per2FromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.day.per2.2') }}</span>
+            <q-input
+              v-model="per2PerRef"
+              type="number"
+              :disable="!per2PerEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.day.per2.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="workDay" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.day.workDay.1') }}</span>
+            <q-input
+              v-model="workDayRef"
+              type="number"
+              :disable="!workDayEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.day.workDay.2') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="lastDay" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.day.lastDay') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="specify" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.day.specify') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section>
+        <q-item-label>
+          <div class="row">
+            <template v-for="index in 31" :key="index">
+              <template v-if="index % 10 === 1">
+                <div class="col-1"></div>
+              </template>
+              <div class="col-1">
+                <q-checkbox
+                  v-model="optionsRef[index - 1]"
+                  dense
+                  :label="'' + index"
+                  :disable="!optionsEnableRef"
+                  @update:model-value="valueChanged"
+                ></q-checkbox>
+              </div>
+              <template v-if="index % 10 === 0">
+                <div class="col-1"></div>
+              </template>
+            </template>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tools } from '@/platform';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+});
+const emit = defineEmits(['update:modelValue']);
+
+const valueRef = ref(props.modelValue);
+const modeRef = ref('');
+
+const periodFromEnableRef = ref(false);
+const periodFromRef = ref('');
+
+const periodToEnableRef = ref(false);
+const periodToRef = ref('');
+
+const per2FromEnableRef = ref(false);
+const per2FromRef = ref('');
+
+const per2PerEnableRef = ref(false);
+const per2PerRef = ref('');
+
+const workDayEnableRef = ref(false);
+const workDayRef = ref('');
+
+const optionsEnableRef = ref(false);
+const optionsRef = ref([]);
+for (let i = 0; i < 31; i++) {
+  optionsRef.value.push(false);
+}
+
+const valueChanged = () => {
+  if (modeRef.value === 'per') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    workDayEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'period') {
+    periodFromEnableRef.value = true;
+    periodToEnableRef.value = true;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    workDayEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'per2') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = true;
+    per2PerEnableRef.value = true;
+    workDayEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'workDay') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    workDayEnableRef.value = true;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'lastDay') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    workDayEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'specify') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    workDayEnableRef.value = false;
+    optionsEnableRef.value = true;
+  }
+
+  if (modeRef.value === 'per') {
+    valueRef.value = '*';
+  } else if (modeRef.value === 'period') {
+    valueRef.value = periodFromRef.value + '-' + periodToRef.value;
+  } else if (modeRef.value === 'per2') {
+    valueRef.value = per2FromRef.value + '/' + per2PerRef.value;
+  } else if (modeRef.value === 'workDay') {
+    valueRef.value = workDayRef.value + 'W';
+  } else if (modeRef.value === 'lastDay') {
+    valueRef.value = 'L';
+  } else if (modeRef.value === 'specify') {
+    let seconds = [];
+    for (let i = 0; i < 31; i++) {
+      if (optionsRef.value[i]) {
+        seconds.push(i + 1);
+      }
+    }
+    valueRef.value = Tools.join(seconds, ',');
+  }
+
+  emit('update:modelValue', valueRef.value);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/HourSegment.vue b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/HourSegment.vue
new file mode 100644
index 00000000..46cf0173
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/HourSegment.vue
@@ -0,0 +1,185 @@
+<template>
+  <q-list dense style="width: 100%">
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.hour.per') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="period" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.hour.period.1') }}</span>
+            <q-input
+              v-model="periodFromRef"
+              type="number"
+              :disable="!periodFromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.hour.period.2') }}</span>
+            <q-input
+              v-model="periodToRef"
+              type="number"
+              :disable="!periodToEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.hour.period.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per2" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.hour.per2.1') }}</span>
+            <q-input
+              v-model="per2FromRef"
+              type="number"
+              :disable="!per2FromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.hour.per2.2') }}</span>
+            <q-input
+              v-model="per2PerRef"
+              type="number"
+              :disable="!per2PerEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.hour.per2.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="specify" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.hour.specify') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-item-label>
+          <div class="row">
+            <template v-for="index in 24" :key="index">
+              <template v-if="index % 8 === 1">
+                <div class="col-1"></div>
+              </template>
+              <div class="col-1">
+                <q-checkbox
+                  v-model="optionsRef[index - 1]"
+                  dense
+                  :label="'' + (index - 1)"
+                  :disable="!optionsEnableRef"
+                  @update:model-value="valueChanged"
+                ></q-checkbox>
+              </div>
+              <template v-if="index % 8 === 0">
+                <div class="col-3"></div>
+              </template>
+            </template>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tools } from '@/platform';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+});
+const emit = defineEmits(['update:modelValue']);
+
+const valueRef = ref(props.modelValue);
+const modeRef = ref('');
+
+const periodFromEnableRef = ref(false);
+const periodFromRef = ref('');
+
+const periodToEnableRef = ref(false);
+const periodToRef = ref('');
+
+const per2FromEnableRef = ref(false);
+const per2FromRef = ref('');
+
+const per2PerEnableRef = ref(false);
+const per2PerRef = ref('');
+
+const optionsEnableRef = ref(false);
+const optionsRef = ref([]);
+for (let i = 0; i < 24; i++) {
+  optionsRef.value.push(false);
+}
+
+const valueChanged = () => {
+  if (modeRef.value === 'per') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'period') {
+    periodFromEnableRef.value = true;
+    periodToEnableRef.value = true;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'per2') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = true;
+    per2PerEnableRef.value = true;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'specify') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = true;
+  }
+
+  if (modeRef.value === 'per') {
+    valueRef.value = '*';
+  } else if (modeRef.value === 'period') {
+    valueRef.value = periodFromRef.value + '-' + periodToRef.value;
+  } else if (modeRef.value === 'per2') {
+    valueRef.value = per2FromRef.value + '/' + per2PerRef.value;
+  } else if (modeRef.value === 'specify') {
+    let seconds = [];
+    for (let i = 0; i < 24; i++) {
+      if (optionsRef.value[i]) {
+        seconds.push(i);
+      }
+    }
+    valueRef.value = Tools.join(seconds, ',');
+  }
+
+  emit('update:modelValue', valueRef.value);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/MinuteSegment.vue b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/MinuteSegment.vue
new file mode 100644
index 00000000..90e4f44f
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/MinuteSegment.vue
@@ -0,0 +1,185 @@
+<template>
+  <q-list dense style="width: 100%">
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.minute.per') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="period" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.minute.period.1') }}</span>
+            <q-input
+              v-model="periodFromRef"
+              type="number"
+              :disable="!periodFromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.minute.period.2') }}</span>
+            <q-input
+              v-model="periodToRef"
+              type="number"
+              :disable="!periodToEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.minute.period.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per2" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.minute.per2.1') }}</span>
+            <q-input
+              v-model="per2FromRef"
+              type="number"
+              :disable="!per2FromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.minute.per2.2') }}</span>
+            <q-input
+              v-model="per2PerRef"
+              type="number"
+              :disable="!per2PerEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.minute.per2.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="specify" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.minute.specify') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-item-label>
+          <div class="row">
+            <template v-for="index in 60" :key="index">
+              <template v-if="index % 10 === 1">
+                <div class="col-1"></div>
+              </template>
+              <div class="col-1">
+                <q-checkbox
+                  v-model="optionsRef[index - 1]"
+                  dense
+                  :label="'' + (index - 1)"
+                  :disable="!optionsEnableRef"
+                  @update:model-value="valueChanged"
+                ></q-checkbox>
+              </div>
+              <template v-if="index % 10 === 0">
+                <div class="col-1"></div>
+              </template>
+            </template>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tools } from '@/platform';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+});
+const emit = defineEmits(['update:modelValue']);
+
+const valueRef = ref(props.modelValue);
+const modeRef = ref('');
+
+const periodFromEnableRef = ref(false);
+const periodFromRef = ref('');
+
+const periodToEnableRef = ref(false);
+const periodToRef = ref('');
+
+const per2FromEnableRef = ref(false);
+const per2FromRef = ref('');
+
+const per2PerEnableRef = ref(false);
+const per2PerRef = ref('');
+
+const optionsEnableRef = ref(false);
+const optionsRef = ref([]);
+for (let i = 0; i < 60; i++) {
+  optionsRef.value.push(false);
+}
+
+const valueChanged = () => {
+  if (modeRef.value === 'per') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'period') {
+    periodFromEnableRef.value = true;
+    periodToEnableRef.value = true;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'per2') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = true;
+    per2PerEnableRef.value = true;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'specify') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = true;
+  }
+
+  if (modeRef.value === 'per') {
+    valueRef.value = '*';
+  } else if (modeRef.value === 'period') {
+    valueRef.value = periodFromRef.value + '-' + periodToRef.value;
+  } else if (modeRef.value === 'per2') {
+    valueRef.value = per2FromRef.value + '/' + per2PerRef.value;
+  } else if (modeRef.value === 'specify') {
+    let seconds = [];
+    for (let i = 0; i < 60; i++) {
+      if (optionsRef.value[i]) {
+        seconds.push(i);
+      }
+    }
+    valueRef.value = Tools.join(seconds, ',');
+  }
+
+  emit('update:modelValue', valueRef.value);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/MonthSegment.vue b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/MonthSegment.vue
new file mode 100644
index 00000000..13604ef3
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/MonthSegment.vue
@@ -0,0 +1,197 @@
+<template>
+  <q-list dense style="width: 100%">
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.month.per') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="notSpecify" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.month.notSpecify') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="period" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.month.period.1') }}</span>
+            <q-input
+              v-model="periodFromRef"
+              type="number"
+              :disable="!periodFromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.month.period.2') }}</span>
+            <q-input
+              v-model="periodToRef"
+              type="number"
+              :disable="!periodToEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.month.period.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per2" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.month.per2.1') }}</span>
+            <q-input
+              v-model="per2FromRef"
+              type="number"
+              :disable="!per2FromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.month.per2.2') }}</span>
+            <q-input
+              v-model="per2PerRef"
+              type="number"
+              :disable="!per2PerEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.month.per2.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="specify" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.month.specify') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section>
+        <q-item-label>
+          <div class="row">
+            <template v-for="index in 12" :key="index">
+              <template v-if="index % 6 === 1">
+                <div class="col-1"></div>
+              </template>
+              <div class="col-1">
+                <q-checkbox
+                  v-model="optionsRef[index - 1]"
+                  dense
+                  :label="'' + index"
+                  :disable="!optionsEnableRef"
+                  @update:model-value="valueChanged"
+                ></q-checkbox>
+              </div>
+              <template v-if="index % 6 === 0">
+                <div class="col-5"></div>
+              </template>
+            </template>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tools } from '@/platform';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+});
+const emit = defineEmits(['update:modelValue']);
+
+const valueRef = ref(props.modelValue);
+const modeRef = ref('');
+
+const periodFromEnableRef = ref(false);
+const periodFromRef = ref('');
+
+const periodToEnableRef = ref(false);
+const periodToRef = ref('');
+
+const per2FromEnableRef = ref(false);
+const per2FromRef = ref('');
+
+const per2PerEnableRef = ref(false);
+const per2PerRef = ref('');
+
+const workDayEnableRef = ref(false);
+const workDayRef = ref('');
+
+const optionsEnableRef = ref(false);
+const optionsRef = ref([]);
+for (let i = 0; i < 12; i++) {
+  optionsRef.value.push(false);
+}
+
+const valueChanged = () => {
+  if (modeRef.value === 'per') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'period') {
+    periodFromEnableRef.value = true;
+    periodToEnableRef.value = true;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'per2') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = true;
+    per2PerEnableRef.value = true;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'specify') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = true;
+  }
+
+  if (modeRef.value === 'per') {
+    valueRef.value = '*';
+  } else if (modeRef.value === 'period') {
+    valueRef.value = periodFromRef.value + '-' + periodToRef.value;
+  } else if (modeRef.value === 'per2') {
+    valueRef.value = per2FromRef.value + '/' + per2PerRef.value;
+  } else if (modeRef.value === 'specify') {
+    let seconds = [];
+    for (let i = 0; i < 12; i++) {
+      if (optionsRef.value[i]) {
+        seconds.push(i + 1);
+      }
+    }
+    valueRef.value = Tools.join(seconds, ',');
+  }
+
+  emit('update:modelValue', valueRef.value);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/SecondSegment.vue b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/SecondSegment.vue
new file mode 100644
index 00000000..c68291be
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/SecondSegment.vue
@@ -0,0 +1,185 @@
+<template>
+  <q-list dense style="width: 100%">
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.second.per') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="period" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.second.period.1') }}</span>
+            <q-input
+              v-model="periodFromRef"
+              type="number"
+              :disable="!periodFromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.second.period.2') }}</span>
+            <q-input
+              v-model="periodToRef"
+              type="number"
+              :disable="!periodToEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.second.period.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per2" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.second.per2.1') }}</span>
+            <q-input
+              v-model="per2FromRef"
+              type="number"
+              :disable="!per2FromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.second.per2.2') }}</span>
+            <q-input
+              v-model="per2PerRef"
+              type="number"
+              :disable="!per2PerEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.second.per2.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="specify" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.second.specify') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-item-label>
+          <div class="row">
+            <template v-for="index in 60" :key="index">
+              <template v-if="index % 10 === 1">
+                <div class="col-1"></div>
+              </template>
+              <div class="col-1">
+                <q-checkbox
+                  v-model="optionsRef[index - 1]"
+                  dense
+                  :label="'' + (index - 1)"
+                  :disable="!optionsEnableRef"
+                  @update:model-value="valueChanged"
+                ></q-checkbox>
+              </div>
+              <template v-if="index % 10 === 0">
+                <div class="col-1"></div>
+              </template>
+            </template>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tools } from '@/platform';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+});
+const emit = defineEmits(['update:modelValue']);
+
+const valueRef = ref(props.modelValue);
+const modeRef = ref('');
+
+const periodFromEnableRef = ref(false);
+const periodFromRef = ref('');
+
+const periodToEnableRef = ref(false);
+const periodToRef = ref('');
+
+const per2FromEnableRef = ref(false);
+const per2FromRef = ref('');
+
+const per2PerEnableRef = ref(false);
+const per2PerRef = ref('');
+
+const optionsEnableRef = ref(false);
+const optionsRef = ref([]);
+for (let i = 0; i < 60; i++) {
+  optionsRef.value.push(false);
+}
+
+const valueChanged = () => {
+  if (modeRef.value === 'per') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'period') {
+    periodFromEnableRef.value = true;
+    periodToEnableRef.value = true;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'per2') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = true;
+    per2PerEnableRef.value = true;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'specify') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    per2FromEnableRef.value = false;
+    per2PerEnableRef.value = false;
+    optionsEnableRef.value = true;
+  }
+
+  if (modeRef.value === 'per') {
+    valueRef.value = '*';
+  } else if (modeRef.value === 'period') {
+    valueRef.value = periodFromRef.value + '-' + periodToRef.value;
+  } else if (modeRef.value === 'per2') {
+    valueRef.value = per2FromRef.value + '/' + per2PerRef.value;
+  } else if (modeRef.value === 'specify') {
+    let seconds = [];
+    for (let i = 0; i < 60; i++) {
+      if (optionsRef.value[i]) {
+        seconds.push(i);
+      }
+    }
+    valueRef.value = Tools.join(seconds, ',');
+  }
+
+  emit('update:modelValue', valueRef.value);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/WeekSegment.vue b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/WeekSegment.vue
new file mode 100644
index 00000000..6c07fa4b
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/WeekSegment.vue
@@ -0,0 +1,233 @@
+<template>
+  <q-list dense style="width: 100%">
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.week.per') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="notSpecify" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.week.notSpecify') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="period" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.week.period.1') }}</span>
+            <q-input
+              v-model="periodFromRef"
+              type="number"
+              :disable="!periodFromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.week.period.2') }}</span>
+            <q-input
+              v-model="periodToRef"
+              type="number"
+              :disable="!periodToEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.week.period.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="weekOfYear" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.week.weekOfYear.1') }}</span>
+            <q-input
+              v-model="weekOfYearRef"
+              type="number"
+              :disable="!weekOfYearEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.week.weekOfYear.2') }}</span>
+            <q-input
+              v-model="dayOfWeekRef"
+              type="number"
+              :disable="!dayOfWeekEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.week.weekOfYear.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="lastWeek" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.week.lastDay.1') }}</span>
+            <q-input
+              v-model="lastWeekRef"
+              type="number"
+              :disable="!lastWeekEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.week.lastDay.2') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="specify" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.week.specify') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section>
+        <q-item-label>
+          <div class="row">
+            <template v-for="index in 7" :key="index">
+              <template v-if="index % 7 === 1">
+                <div class="col-1"></div>
+              </template>
+              <div class="col-1">
+                <q-checkbox
+                  v-model="optionsRef[index - 1]"
+                  dense
+                  :label="'' + index"
+                  :disable="!optionsEnableRef"
+                  @update:model-value="valueChanged"
+                ></q-checkbox>
+              </div>
+              <template v-if="index % 7 === 0">
+                <div class="col-5"></div>
+              </template>
+            </template>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tools } from '@/platform';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+});
+const emit = defineEmits(['update:modelValue']);
+
+const valueRef = ref(props.modelValue);
+const modeRef = ref('');
+
+const periodFromEnableRef = ref(false);
+const periodFromRef = ref('');
+
+const periodToEnableRef = ref(false);
+const periodToRef = ref('');
+
+const weekOfYearEnableRef = ref(false);
+const weekOfYearRef = ref('');
+
+const dayOfWeekEnableRef = ref(false);
+const dayOfWeekRef = ref('');
+
+const lastWeekEnableRef = ref(false);
+const lastWeekRef = ref('');
+
+const optionsEnableRef = ref(false);
+const optionsRef = ref([]);
+for (let i = 0; i < 7; i++) {
+  optionsRef.value.push(false);
+}
+
+const valueChanged = () => {
+  if (modeRef.value === 'per') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    weekOfYearEnableRef.value = false;
+    dayOfWeekEnableRef.value = false;
+    lastWeekEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'period') {
+    periodFromEnableRef.value = true;
+    periodToEnableRef.value = true;
+    weekOfYearEnableRef.value = false;
+    dayOfWeekEnableRef.value = false;
+    lastWeekEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'weekOfYear') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    weekOfYearEnableRef.value = true;
+    dayOfWeekEnableRef.value = true;
+    lastWeekEnableRef.value = false;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'lastWeek') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    weekOfYearEnableRef.value = false;
+    dayOfWeekEnableRef.value = false;
+    lastWeekEnableRef.value = true;
+    optionsEnableRef.value = false;
+  } else if (modeRef.value === 'specify') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+    weekOfYearEnableRef.value = false;
+    dayOfWeekEnableRef.value = false;
+    lastWeekEnableRef.value = false;
+    optionsEnableRef.value = true;
+  }
+
+  if (modeRef.value === 'per') {
+    valueRef.value = '*';
+  } else if (modeRef.value === 'period') {
+    valueRef.value = periodFromRef.value + '-' + periodToRef.value;
+  } else if (modeRef.value === 'weekOfYear') {
+    valueRef.value = weekOfYearRef.value + '/' + dayOfWeekRef.value;
+  } else if (modeRef.value === 'lastWeek') {
+    valueRef.value = lastWeekRef.value + 'L';
+  } else if (modeRef.value === 'specify') {
+    let seconds = [];
+    for (let i = 0; i < 7; i++) {
+      if (optionsRef.value[i]) {
+        seconds.push(i + 1);
+      }
+    }
+    valueRef.value = Tools.join(seconds, ',');
+  }
+
+  emit('update:modelValue', valueRef.value);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/YearSegment.vue b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/YearSegment.vue
new file mode 100644
index 00000000..25c18efb
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/cron/w-cron-segment/YearSegment.vue
@@ -0,0 +1,93 @@
+<template>
+  <q-list dense style="width: 100%">
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="per" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.year.per') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="notSpecify" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>{{ $t('cron.year.notSpecify') }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-radio v-model="modeRef" val="period" @update:model-value="valueChanged" />
+      </q-item-section>
+      <q-item-section>
+        <q-item-label>
+          <div class="row no-wrap items-center">
+            <span class="pr-2">{{ $t('cron.year.period.1') }}</span>
+            <q-input
+              v-model="periodFromRef"
+              type="number"
+              :disable="!periodFromEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.year.period.2') }}</span>
+            <q-input
+              v-model="periodToRef"
+              type="number"
+              :disable="!periodToEnableRef"
+              outlined
+              dense
+              style="width: 100px"
+              @update:model-value="valueChanged"
+            ></q-input>
+            <span class="px-2">{{ $t('cron.year.period.3') }}</span>
+          </div>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tools } from '@/platform';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+});
+const emit = defineEmits(['update:modelValue']);
+
+const valueRef = ref(props.modelValue);
+const modeRef = ref('');
+
+const periodFromEnableRef = ref(false);
+const periodFromRef = ref('');
+
+const periodToEnableRef = ref(false);
+const periodToRef = ref('');
+
+const valueChanged = () => {
+  if (modeRef.value === 'per') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+  } else if (modeRef.value === 'notSpecify') {
+    periodFromEnableRef.value = false;
+    periodToEnableRef.value = false;
+  } else if (modeRef.value === 'period') {
+    periodFromEnableRef.value = true;
+    periodToEnableRef.value = true;
+  }
+
+  if (modeRef.value === 'per') {
+    valueRef.value = '*';
+  } else if (modeRef.value === 'notSpecify') {
+    valueRef.value = '';
+  } else if (modeRef.value === 'period') {
+    valueRef.value = periodFromRef.value + '-' + periodToRef.value;
+  }
+
+  emit('update:modelValue', valueRef.value);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/date/WDate.vue b/io.sc.platform.core.frontend/src/platform/components/date/WDate.vue
new file mode 100644
index 00000000..6b98deba
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/date/WDate.vue
@@ -0,0 +1,78 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="dateRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="FieldMethods.getRules(props, modelValue, dateRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+      @focus="
+        () => {
+          dateRef?.blur();
+        }
+      "
+    >
+      <template #label>
+        <w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label>
+      </template>
+      <template v-if="!FieldMethods.getReadOnly(props, modelValue)" #append>
+        <q-icon name="event" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-date v-model="modelValue" today-btn mask="YYYY-MM-DD" @update:model-value="fieldMethodsClass.updateValue"> </q-date>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const dateRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+
+interface FieldProps extends FormFieldProps {}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return dateRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/date/WDateRange.vue b/io.sc.platform.core.frontend/src/platform/components/date/WDateRange.vue
new file mode 100644
index 00000000..1144ad84
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/date/WDateRange.vue
@@ -0,0 +1,88 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="dateRangeRef"
+      v-model="displayValueComputed"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :clearable="false"
+      :rules="FieldMethods.getRules(props, modelValue, dateRangeRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+      @focus="
+        () => {
+          dateRangeRef?.blur();
+        }
+      "
+    >
+      <template #label>
+        <w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label>
+      </template>
+      <template v-if="!FieldMethods.getReadOnly(props, modelValue)" #append>
+        <q-btn v-if="!Tools.isEmpty(displayValueComputed)" flat square unelevated dense icon="cancel" @click="fieldMethodsClass.clearValue"></q-btn>
+        <q-icon name="event" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-date v-model="modelValue" today-btn mask="YYYY-MM-DD" :range="true" @update:model-value="fieldMethodsClass.updateValue"> </q-date>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs, computed } from 'vue';
+import { Tools } from '@/platform';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const dateRangeRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<object>();
+
+interface FieldProps extends FormFieldProps {}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return dateRangeRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+const displayValueComputed = computed(() => {
+  if (modelValue.value) {
+    return modelValue.value['from'] + ' 至 ' + modelValue.value['to'];
+  }
+  return '';
+});
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/file/WFile.vue b/io.sc.platform.core.frontend/src/platform/components/file/WFile.vue
new file mode 100644
index 00000000..7800e395
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/file/WFile.vue
@@ -0,0 +1,70 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-file
+      ref="fileRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      :clearable="true"
+      v-bind="attrs"
+      :rules="FieldMethods.getRules(props, modelValue, fileRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label>
+        <w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label>
+      </template>
+      <template v-if="!FieldMethods.getReadOnly(props, modelValue)" #append>
+        <q-icon name="attachment" />
+      </template>
+    </q-file>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const fileRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<File | Array<File>>();
+
+interface FieldProps extends FormFieldProps {}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return fileRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/FormField.ts b/io.sc.platform.core.frontend/src/platform/components/form/FormField.ts
new file mode 100644
index 00000000..8c3c92bf
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/form/FormField.ts
@@ -0,0 +1,92 @@
+import { Tools } from '@/platform';
+import { FormValidators } from '@/platform/components';
+
+export interface FormFieldProps {
+  name?: string;
+  form?: object; // form对象实例
+  showIf?: boolean | (() => void); // 是否显示
+  requiredIf?: boolean | (() => void); // 是否必填
+  readOnlyIf?: boolean | (() => void); // 是否只读
+  disableIf?: boolean | (() => void); // 是否禁用
+  rules?: Array<() => void>; // 验证规则集合
+  onUpdateValue?: () => void; // 值改变事件函数
+}
+
+export abstract class FormFieldMethods {
+  // 值改变事件
+  abstract updateValue(value_): void;
+  // 验证方法
+  abstract validate(): Promise<boolean> | boolean;
+  // 设置值
+  abstract setValue(value_): void;
+  // 获取值
+  abstract getValue(): any;
+  // 清空值
+  abstract clearValue(): void;
+
+  // 获取验证规则集结果
+  static getRules = (props_, value_, componentRef_, defaultValue_) => {
+    let result = props_.rules || <any>[];
+    if (!Tools.isEmpty(defaultValue_)) {
+      result.push(...defaultValue_);
+    }
+    const showResult = FormFieldMethods.getShow(props_, value_);
+    const requiredResult = FormFieldMethods.getRequired(props_, value_);
+    if (showResult && requiredResult) {
+      result.push(FormValidators.required());
+    } else if (!showResult) {
+      result = [];
+    }
+    if (componentRef_?.value) {
+      componentRef_.value.resetValidation();
+    }
+    return result;
+  };
+  // 获取是否必填结果
+  static getRequired = (props_, value_) => {
+    if (!Tools.isEmpty(props_.requiredIf)) {
+      if (typeof props_.requiredIf === 'boolean') {
+        return props_.requiredIf;
+      } else if (typeof props_.requiredIf === 'function') {
+        return props_.requiredIf({ value: value_, form: props_.form }) || false;
+      }
+    }
+    return false;
+  };
+  // 获取是否显示结果
+  static getShow = (props_, value_) => {
+    if (!Tools.isEmpty(props_.showIf)) {
+      if (typeof props_.showIf === 'boolean') {
+        return props_.showIf;
+      } else if (typeof props_.showIf === 'function') {
+        return props_.showIf({ value: value_, form: props_.form }) || false;
+      }
+    }
+    return true;
+  };
+  // 获取是否只读结果
+  static getReadOnly = (props_, value_) => {
+    if (props_.form && props_.form.getStatus() === 'view') {
+      return true;
+    }
+    if (!Tools.isEmpty(props_.readOnlyIf)) {
+      if (typeof props_.readOnlyIf === 'boolean') {
+        return props_.readOnlyIf;
+      } else if (typeof props_.readOnlyIf === 'function') {
+        return props_.readOnlyIf({ value: value_, form: props_.form }) || false;
+      }
+    }
+    return false;
+  };
+  // 获取是否禁用结果
+  static getDisable = (props_, value_) => {
+    if (!Tools.isEmpty(props_.disableIf)) {
+      if (typeof props_.disableIf === 'boolean') {
+        return props_.disableIf;
+      } else if (typeof props_.disableIf === 'function') {
+        return props_.disableIf({ value: value_, form: props_.form }) || false;
+      }
+    }
+    return false;
+  };
+}
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 6048f1b3..d1c608aa 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
@@ -5,7 +5,7 @@
         <template v-for="(field, index) in fieldsComputed as any" :key="String(index)">
           <template v-if="field.name">
             <component
-              :is="fiedType[field.type] || field.type"
+              :is="field.type"
               :ref="(el) => setComponentRef(el, field.name)"
               v-model="formData[field.name]"
               v-bind="field"
@@ -23,7 +23,7 @@
           </template>
           <template v-else>
             <component
-              :is="fiedType[field.type] || field.type"
+              :is="field.type"
               :ref="(el) => setComponentRef(el, field.name)"
               :form-ref="formRef"
               v-bind="field"
@@ -46,9 +46,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, computed, toRaw, useAttrs, getCurrentInstance, nextTick, onUpdated } from 'vue';
+import { ref, reactive, watch, computed, toRaw, useAttrs, getCurrentInstance } from 'vue';
 import { useQuasar } from 'quasar';
-import { VueTools, Tools, eventBus } from '@/platform';
+import { VueTools, Tools } from '@/platform';
 import { PageStatusEnum } from '@/platform/components/utils';
 
 const $q = useQuasar();
@@ -81,46 +81,24 @@ const formFields = {};
 let fields_ = ref([...props.fields]);
 // 不同屏幕尺寸下 colsNum 为 0 时一行显示的字段个数
 const screenCols = { xs: 1, sm: 2, md: 3, lg: 4, xl: 6 };
-const fiedType = {
-  checkbox: 'w-checkbox',
-  cron: 'w-cron',
-  'color-input': 'w-color-input',
-  colorInput: 'w-color-input',
-  'color-input-palette': 'w-color-input-palette',
-  colorInputPalette: 'w-color-input-palette',
-  'code-mirror': 'w-code-mirror',
-  codeMirror: 'w-code-mirror',
-  position: 'w-position',
-  date: 'w-date',
-  icon: 'w-icon',
-  number: 'w-number',
-  select: 'w-select',
-  treeSelect: 'w-tree-select',
-  'tree-select': 'w-tree-select',
-  text: 'w-text',
-  textarea: 'w-textarea',
-  'text-btn': 'w-text-btn',
-  textBtn: 'w-text-btn',
-  password: 'w-password',
-  'option-group': 'w-option-group',
-  optionGroup: 'w-option-group',
-  file: 'w-file',
-  expression: 'w-expression',
-  math: 'w-math',
-};
 
 const defaultValueHandler = (field) => {
   if (!Tools.isUndefinedOrNull(field.defaultValue)) {
     return field.defaultValue;
-  } else if (field.type === 'checkbox' || field.type === 'w-checkbox') {
+  } else if (field.type === 'w-checkbox') {
     return false;
-  } else if (field.type === 'option-group' || field.type === 'optionGroup' || field.type === 'w-option-group') {
+  } else if (field.type === 'w-checkbox-group') {
+    return [];
+  } else if (field.type === 'w-option-group') {
     if (!field.optionType || field.optionType === 'radio') {
       return undefined;
     } else {
       return [];
     }
-  } else if ((field.type === 'select' || field.type === 'w-select') && field.multiple) {
+  } else if (
+    (field.type === 'w-select' || field.type === 'w-user-select' || field.type === 'w-org-select' || field.type === 'w-grid-select') &&
+    field.multiple
+  ) {
     return [];
   }
   return undefined;
@@ -141,20 +119,6 @@ watch(
   },
 );
 
-// eventBus.on('onLocaleChanged', (local) => {
-//   console.info('localeChanged====0----');
-//   nextTick(() => {
-//     console.info('localeChanged====1----', props.fields);
-//     fields_ = ref([...props.fields]);
-//     for (const field of fields_.value as any) {
-//       if (field.name) {
-//         formFields[field.name] = field;
-//       }
-//     }
-//     localFlag.value = !localFlag.value;
-//     console.info('localeChanged====2----', fields_.value);
-//   });
-// });
 watch(
   () => props.fields.map((item) => item['label']),
   (newVal, oldVal) => {
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/WForm_bak.vue b/io.sc.platform.core.frontend/src/platform/components/form/WForm_bak.vue
new file mode 100644
index 00000000..2389250e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/form/WForm_bak.vue
@@ -0,0 +1,320 @@
+<template>
+  <div>
+    <q-form ref="formRef" :autofocus="false" :greedy="true" v-bind="attrs">
+      <div v-if="fieldsComputed.length > 0" class="grid" :class="formLayoutComputed">
+        <template v-for="(field, index) in fieldsComputed as any" :key="String(index)">
+          <template v-if="field.name">
+            <component
+              :is="field.type"
+              :ref="(el) => setComponentRef(el, field.name)"
+              v-model="formData[field.name]"
+              v-bind="field"
+              :form="instance"
+              :class="
+                (field.colsFirst ? 'col-start-1 ' : ' ') +
+                (field.colSpan === 'full'
+                  ? ' col-span-' + screenColsNumComputed
+                  : field.colSpan && screenColsNumComputed >= field.colSpan
+                    ? ' col-span-' + field.colSpan
+                    : ' col-span-1')
+              "
+              @update:model-value="updateModelValue(field.name, formData[field.name])"
+            ></component>
+          </template>
+          <template v-else>
+            <component
+              :is="field.type"
+              :ref="(el) => setComponentRef(el, field.name)"
+              :form-ref="formRef"
+              v-bind="field"
+              :form="instance"
+              :class="
+                (field.colsFirst ? 'col-start-1 ' : ' ') +
+                (field.colSpan === 'full'
+                  ? ' col-span-' + screenColsNumComputed
+                  : field.colSpan && screenColsNumComputed >= field.colSpan
+                    ? ' col-span-' + field.colSpan
+                    : ' col-span-1')
+              "
+            ></component>
+          </template>
+        </template>
+      </div>
+      <slot></slot>
+    </q-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, computed, toRaw, useAttrs, getCurrentInstance } from 'vue';
+import { useQuasar } from 'quasar';
+import { VueTools, Tools } from '@/platform';
+import { PageStatusEnum } from '@/platform/components/utils';
+
+const $q = useQuasar();
+const attrs = useAttrs();
+const componentRef = ref({});
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {
+      return undefined;
+    },
+  },
+  colsNum: { type: [Number, Object], default: 0 },
+  colsXGap: { type: Number, default: 8 },
+  colsYGap: { type: Number, default: 4 },
+  fields: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const localFlag = ref(false);
+const formRef = ref();
+const formStatus = ref(PageStatusEnum.新增);
+const formModel: any = {};
+const formFields = {};
+let fields_ = ref([...props.fields]);
+// 不同屏幕尺寸下 colsNum 为 0 时一行显示的字段个数
+const screenCols = { xs: 1, sm: 2, md: 3, lg: 4, xl: 6 };
+
+const defaultValueHandler = (field) => {
+  if (!Tools.isUndefinedOrNull(field.defaultValue)) {
+    return field.defaultValue;
+  } else if (field.type === 'w-checkbox') {
+    return false;
+  } else if (field.type === 'w-option-group') {
+    if (!field.optionType || field.optionType === 'radio') {
+      return undefined;
+    } else {
+      return [];
+    }
+  } else if (field.type === 'w-select' && field.multiple) {
+    return [];
+  }
+  return undefined;
+};
+
+watch(
+  () => props.fields,
+  (newVal, oldVal) => {
+    if (newVal.length !== oldVal.length) {
+      fields_ = ref([...props.fields]);
+      for (const field of fields_.value as any) {
+        if (field.name) {
+          formModel[field.name] = defaultValueHandler(field);
+          formFields[field.name] = field;
+        }
+      }
+    }
+  },
+);
+
+watch(
+  () => props.fields.map((item) => item['label']),
+  (newVal, oldVal) => {
+    fields_ = ref([...props.fields]);
+    for (const field of fields_.value as any) {
+      if (field.name) {
+        formFields[field.name] = field;
+      }
+    }
+    localFlag.value = !localFlag.value;
+  },
+);
+const fieldsComputed = computed(() => {
+  localFlag.value;
+  return fields_.value;
+});
+
+for (const field of fields_.value as any) {
+  if (field.name) {
+    formModel[field.name] = defaultValueHandler(field);
+    formFields[field.name] = field;
+  }
+}
+
+let formData = reactive(!Tools.isEmpty(props.modelValue) ? props.modelValue : formModel);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    formData = reactive(!Tools.isEmpty(props.modelValue) ? props.modelValue : formModel);
+  },
+);
+
+const screenColsNumComputed = computed(() => {
+  if (typeof props.colsNum === 'number' && props.colsNum > 0) {
+    return props.colsNum;
+  } else if (typeof props.colsNum === 'object') {
+    const screen = { ...screenCols, ...props.colsNum };
+    return screen[$q.screen.name];
+  }
+  return screenCols[$q.screen.name];
+});
+const formLayoutComputed = computed(() => {
+  let className = '';
+  if (typeof props.colsNum === 'number' && props.colsNum > 0) {
+    className = 'grid-cols-' + props.colsNum;
+  } else {
+    className = 'grid-cols-' + screenColsNumComputed.value;
+  }
+  className += ' gap-x-[' + props.colsXGap + 'px]';
+  className += ' gap-y-[' + props.colsYGap + 'px]';
+  return className;
+});
+
+const updateModelValue = (name, value) => {
+  if (formFields[name].error) {
+    formFields[name].error = false;
+    formFields[name].errorMessage = undefined;
+  }
+};
+
+const setComponentRef = (el, fieldName) => {
+  if (el) {
+    componentRef.value[fieldName] = el;
+  }
+};
+
+/**
+ * 对外暴露方法-获取form所有数据
+ */
+const getData = () => {
+  const data = { ...toRaw(formData) };
+  return data;
+};
+/**
+ * 对外暴露方法-设置form所有字段值
+ * @param data 数据对象(JSON格式)
+ */
+const setData = (data) => {
+  for (const field of fields_.value as any) {
+    if (data[field.name] !== undefined) {
+      formData[field.name] = data[field.name];
+    }
+  }
+};
+/**
+ * 对外暴露方法-重置表单
+ */
+const reset = () => {
+  Object.keys(formData).forEach((key) => {
+    formData[key] = defaultValueHandler(formFields[key]);
+  });
+};
+const formValidate = async () => {
+  let validate = false;
+  await formRef.value.validate().then((success) => {
+    if (success) {
+      validate = true;
+    }
+  });
+  return validate;
+};
+/**
+ * 对外暴露方法-表单验证
+ */
+const validate = async () => {
+  const v = await formValidate();
+  return v;
+};
+/**
+ * 对外暴露方法-设置字段值
+ * @param fieldName 字段name
+ * @param value 字段值
+ */
+const setFieldValue = (fieldName, value) => {
+  formData[fieldName] = value;
+};
+/**
+ * 对外暴露方法-获取字段值
+ * @param fieldName 字段name
+ */
+const getFieldValue = (fieldName) => {
+  return formData[fieldName];
+};
+/**
+ * 对外暴露方法-设置form状态
+ * @param status 状态
+ */
+const setStatus = (status) => {
+  formStatus.value = status;
+};
+/**
+ * 对外暴露方法-获取form状态
+ */
+const getStatus = () => {
+  return toRaw(formStatus.value);
+};
+/**
+ * 对外暴露方法-获取当前一行应该显示的元素个数
+ */
+const getColsNum = () => {
+  return screenColsNumComputed.value;
+};
+
+/**
+ * 错误消息类型
+ *
+ * @param fieldName 字段名
+ * @param errorMessage 错误消息
+ */
+type errorType = {
+  fieldName: string;
+  errorMessage: string;
+};
+
+/**
+ * 对外暴露方法-设置后台校验错误信息
+ * @param errors 错误消息集合
+ */
+const setValidationErrors = (errors: errorType[]) => {
+  if (errors && errors.length > 0) {
+    const grouped = {};
+    errors.map(({ fieldName, ...rest }) => {
+      grouped[fieldName] = grouped[fieldName] || [];
+      grouped[fieldName].push(rest);
+    });
+    for (let name in grouped) {
+      if (formFields[name]) {
+        formFields[name].error = true;
+        formFields[name].errorMessage = grouped[name]
+          .map((obj) => {
+            return obj.errorMessage;
+          })
+          .join('、');
+      }
+    }
+  }
+};
+
+const getFields = () => {
+  return formFields;
+};
+
+const getFieldComponent = (name) => {
+  return componentRef.value[name];
+};
+
+defineExpose({
+  getFields,
+  getData,
+  setData,
+  reset,
+  validate,
+  getFieldValue,
+  setFieldValue,
+  setStatus,
+  getStatus,
+  getColsNum,
+  setValidationErrors,
+  getFieldComponent,
+});
+
+const instance = getCurrentInstance();
+VueTools.expose2Instance(instance);
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue
deleted file mode 100644
index c528a8ec..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-checkbox v-model="checkboxValue" v-bind="attrs" :disable="disableIfComputed" @update:model-value="updateModelValue" @change="changeValue"></q-checkbox>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useAttrs, ref, watch } from 'vue';
-
-const attrs = useAttrs();
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: Boolean, default: false },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-const checkboxValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    checkboxValue.value = newVal;
-  },
-);
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: checkboxValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.disableIf({
-    value: checkboxValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', value, props.form);
-  changeValue(value);
-};
-
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInput.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInput.vue
deleted file mode 100644
index 28ddcaf5..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInput.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-input
-      ref="colorRef"
-      v-model="colorValueRef"
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="colorChanged"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
-      <template v-if="!props.form || (props.form && props.form.getStatus() !== 'view')" #append>
-        <!-- 选择颜色按钮 -->
-        <q-btn
-          icon="square"
-          size="10px"
-          padding="2px"
-          flat
-          square
-          unelevated
-          :title="$t('select')"
-          :style="{ border: '1px solid #e5e7eb', color: computedColorValue, 'background-color': computedStoreBackgroundColorValue }"
-        >
-          <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]">
-            <q-color
-              v-model="colorValueRef"
-              default-value="colorValueRef"
-              format-model="hex"
-              default-view="palette"
-              style="max-width: 250px"
-              @update:model-value="colorChanged"
-              @change="changeValue"
-            />
-          </q-popup-proxy>
-        </q-btn>
-        <!-- 恢复默认值按钮 -->
-        <q-btn
-          v-if="restore"
-          icon="bi-arrow-counterclockwise"
-          size="10px"
-          padding="2px"
-          flat
-          square
-          unelevated
-          :title="$t('restore')"
-          :style="{ 'margin-left': '5px', border: '1px solid #e5e7eb', color: restoreValue, 'background-color': computedStoreBackgroundColorValue }"
-          @click="restoreDefaultValue"
-        ></q-btn>
-      </template>
-    </q-input>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, toRaw, computed, useAttrs, watch } from 'vue';
-import { Tools } from '@/platform';
-import { FormValidators } from '@/platform/components';
-
-const attrs = useAttrs();
-const rules = attrs.rules;
-const colorRef = ref();
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: String, default: '' },
-  restore: { type: Boolean, default: false },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-
-const isShow = ref(false);
-const defaultValue = '#000000';
-const colorValueRef = ref(props.modelValue || defaultValue);
-if (Tools.isEmpty(props.modelValue)) {
-  emit('update:modelValue', colorValueRef.value);
-}
-const restoreValue = toRaw(props.modelValue || defaultValue);
-
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    colorValueRef.value = newVal;
-  },
-);
-
-const computedColorValue = computed(() => {
-  return colorValueRef.value;
-});
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (colorRef?.value) {
-    colorRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: colorValueRef.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: colorValueRef.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: colorValueRef.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: colorValueRef.value,
-    form: props.form,
-  });
-});
-
-const computedStoreBackgroundColorValue = computed(() => {
-  const color: string = restoreValue;
-  if (color.toLowerCase() === 'white' || color.toLowerCase() === '#ffffff' || color.toLowerCase() === '#fff') {
-    return '#eee';
-  }
-  return undefined;
-});
-
-const colorChanged = (value) => {
-  emit('update:modelValue', value, props.form);
-  isShow.value = false;
-};
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-
-const restoreDefaultValue = () => {
-  colorValueRef.value = restoreValue;
-  emit('update:modelValue', restoreValue, props.form);
-};
-
-const validate = () => {
-  return colorRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInputPalette.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInputPalette.vue
deleted file mode 100644
index 39116327..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInputPalette.vue
+++ /dev/null
@@ -1,440 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-input
-      ref="colorRef"
-      v-model="colorValueRef"
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="colorSelected"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
-      <template v-if="!props.form || (props.form && props.form.getStatus() !== 'view')" #append>
-        <!-- 选择颜色按钮 -->
-        <q-btn
-          icon="bi-palette"
-          size="10px"
-          padding="2px"
-          flat
-          square
-          unelevated
-          :title="$t('select')"
-          :class="`text-${computedColorValue}`"
-          :style="{ border: '1px solid #e5e7eb', 'background-color': computedBackgroundColorValue }"
-        >
-          <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]">
-            <div v-for="(colors, index) in quasarColors" :key="index" class="row">
-              <div
-                v-for="color in colors"
-                :key="`${color}`"
-                :class="`bg-${color}`"
-                style="min-width: 20px; max-width: 20px; min-height: 20px; max-height: 20px"
-                @click="colorClick(`${color}`)"
-              >
-                <q-tooltip> {{ color }}</q-tooltip>
-              </div>
-            </div>
-          </q-popup-proxy>
-        </q-btn>
-        <!-- 恢复默认值按钮 -->
-        <q-btn
-          v-if="restore"
-          icon="bi-arrow-counterclockwise"
-          size="10px"
-          padding="2px"
-          flat
-          square
-          unelevated
-          :title="$t('restore')"
-          :class="`text-${restoreValue}`"
-          :style="{ 'margin-left': '5px', border: '1px solid #e5e7eb', 'background-color': computedStoreBackgroundColorValue }"
-          @click="restoreDefaultValue"
-        ></q-btn>
-      </template>
-    </q-input>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, toRaw, computed, useAttrs, watch } from 'vue';
-import { Tools } from '@/platform';
-import { FormValidators } from '@/platform/components';
-
-const attrs = useAttrs();
-const rules = attrs.rules;
-const colorRef = ref();
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: String, default: '' },
-  restore: { type: Boolean, default: false },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-
-const quasarColors = [
-  ['red', 'red-1', 'red-2', 'red-3', 'red-4', 'red-5', 'red-6', 'red-7', 'red-8', 'red-9', 'red-10', 'red-11', 'red-12', 'red-13', 'red-14'],
-  ['pink', 'pink-1', 'pink-2', 'pink-3', 'pink-4', 'pink-5', 'pink-6', 'pink-7', 'pink-8', 'pink-9', 'pink-10', 'pink-11', 'pink-12', 'pink-13', 'pink-14'],
-  [
-    'purple',
-    'purple-1',
-    'purple-2',
-    'purple-3',
-    'purple-4',
-    'purple-5',
-    'purple-6',
-    'purple-7',
-    'purple-8',
-    'purple-9',
-    'purple-10',
-    'purple-11',
-    'purple-12',
-    'purple-13',
-    'purple-14',
-  ],
-  [
-    'deep-purple',
-    'deep-purple-1',
-    'deep-purple-2',
-    'deep-purple-3',
-    'deep-purple-4',
-    'deep-purple-5',
-    'deep-purple-6',
-    'deep-purple-7',
-    'deep-purple-8',
-    'deep-purple-9',
-    'deep-purple-10',
-    'deep-purple-11',
-    'deep-purple-12',
-    'deep-purple-13',
-    'deep-purple-14',
-  ],
-  [
-    'indigo',
-    'indigo-1',
-    'indigo-2',
-    'indigo-3',
-    'indigo-4',
-    'indigo-5',
-    'indigo-6',
-    'indigo-7',
-    'indigo-8',
-    'indigo-9',
-    'indigo-10',
-    'indigo-11',
-    'indigo-12',
-    'indigo-13',
-    'indigo-14',
-  ],
-  ['blue', 'blue-1', 'blue-2', 'blue-3', 'blue-4', 'blue-5', 'blue-6', 'blue-7', 'blue-8', 'blue-9', 'blue-10', 'blue-11', 'blue-12', 'blue-13', 'blue-14'],
-  [
-    'light-blue',
-    'light-blue-1',
-    'light-blue-2',
-    'light-blue-3',
-    'light-blue-4',
-    'light-blue-5',
-    'light-blue-6',
-    'light-blue-7',
-    'light-blue-8',
-    'light-blue-9',
-    'light-blue-10',
-    'light-blue-11',
-    'light-blue-12',
-    'light-blue-13',
-    'light-blue-14',
-  ],
-  ['cyan', 'cyan-1', 'cyan-2', 'cyan-3', 'cyan-4', 'cyan-5', 'cyan-6', 'cyan-7', 'cyan-8', 'cyan-9', 'cyan-10', 'cyan-11', 'cyan-12', 'cyan-13', 'cyan-14'],
-  ['teal', 'teal-1', 'teal-2', 'teal-3', 'teal-4', 'teal-5', 'teal-6', 'teal-7', 'teal-8', 'teal-9', 'teal-10', 'teal-11', 'teal-12', 'teal-13', 'teal-14'],
-  [
-    'green',
-    'green-1',
-    'green-2',
-    'green-3',
-    'green-4',
-    'green-5',
-    'green-6',
-    'green-7',
-    'green-8',
-    'green-9',
-    'green-10',
-    'green-11',
-    'green-12',
-    'green-13',
-    'green-14',
-  ],
-  [
-    'light-green',
-    'light-green-1',
-    'light-green-2',
-    'light-green-3',
-    'light-green-4',
-    'light-green-5',
-    'light-green-6',
-    'light-green-7',
-    'light-green-8',
-    'light-green-9',
-    'light-green-10',
-    'light-green-11',
-    'light-green-12',
-    'light-green-13',
-    'light-green-14',
-  ],
-  ['lime', 'lime-1', 'lime-2', 'lime-3', 'lime-4', 'lime-5', 'lime-6', 'lime-7', 'lime-8', 'lime-9', 'lime-10', 'lime-11', 'lime-12', 'lime-13', 'lime-14'],
-  [
-    'yellow',
-    'yellow-1',
-    'yellow-2',
-    'yellow-3',
-    'yellow-4',
-    'yellow-5',
-    'yellow-6',
-    'yellow-7',
-    'yellow-8',
-    'yellow-9',
-    'yellow-10',
-    'yellow-11',
-    'yellow-12',
-    'yellow-13',
-    'yellow-14',
-  ],
-  [
-    'amber',
-    'amber-1',
-    'amber-2',
-    'amber-3',
-    'amber-4',
-    'amber-5',
-    'amber-6',
-    'amber-7',
-    'amber-8',
-    'amber-9',
-    'amber-10',
-    'amber-11',
-    'amber-12',
-    'amber-13',
-    'amber-14',
-  ],
-  [
-    'orange',
-    'orange-1',
-    'orange-2',
-    'orange-3',
-    'orange-4',
-    'orange-5',
-    'orange-6',
-    'orange-7',
-    'orange-8',
-    'orange-9',
-    'orange-10',
-    'orange-11',
-    'orange-12',
-    'orange-13',
-    'orange-14',
-  ],
-  [
-    'deep-orange',
-    'deep-orange-1',
-    'deep-orange-2',
-    'deep-orange-3',
-    'deep-orange-4',
-    'deep-orange-5',
-    'deep-orange-6',
-    'deep-orange-7',
-    'deep-orange-8',
-    'deep-orange-9',
-    'deep-orange-10',
-    'deep-orange-11',
-    'deep-orange-12',
-    'deep-orange-13',
-    'deep-orange-14',
-  ],
-  [
-    'brown',
-    'brown-1',
-    'brown-2',
-    'brown-3',
-    'brown-4',
-    'brown-5',
-    'brown-6',
-    'brown-7',
-    'brown-8',
-    'brown-9',
-    'brown-10',
-    'brown-11',
-    'brown-12',
-    'brown-13',
-    'brown-14',
-  ],
-  ['grey', 'grey-1', 'grey-2', 'grey-3', 'grey-4', 'grey-5', 'grey-6', 'grey-7', 'grey-8', 'grey-9', 'grey-10', 'grey-11', 'grey-12', 'grey-13', 'grey-14'],
-  [
-    'blue-grey',
-    'blue-grey-1',
-    'blue-grey-2',
-    'blue-grey-3',
-    'blue-grey-4',
-    'blue-grey-5',
-    'blue-grey-6',
-    'blue-grey-7',
-    'blue-grey-8',
-    'blue-grey-9',
-    'blue-grey-10',
-    'blue-grey-11',
-    'blue-grey-12',
-    'blue-grey-13',
-    'blue-grey-14',
-  ],
-  ['white', 'black'],
-];
-
-const isShow = ref(false);
-const defaultValue = 'black';
-const colorValueRef = ref(props.modelValue || defaultValue);
-if (Tools.isEmpty(props.modelValue)) {
-  emit('update:modelValue', {
-    value: colorValueRef.value,
-    form: props.form,
-  });
-}
-const restoreValue = toRaw(props.modelValue || defaultValue);
-
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    colorValueRef.value = newVal;
-  },
-);
-
-const computedColorValue = computed(() => {
-  return colorValueRef.value;
-});
-
-const computedBackgroundColorValue = computed(() => {
-  const color: string = toRaw(colorValueRef.value);
-  if (color.toLowerCase() === 'white' || color.toLowerCase() === '#ffffff' || color.toLowerCase() === '#fff') {
-    return '#eee';
-  }
-  return undefined;
-});
-
-const computedStoreBackgroundColorValue = computed(() => {
-  const color: string = restoreValue;
-  if (color.toLowerCase() === 'white' || color.toLowerCase() === '#ffffff' || color.toLowerCase() === '#fff') {
-    return '#eee';
-  }
-  return undefined;
-});
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (colorRef?.value) {
-    colorRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: colorValueRef.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: colorValueRef.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: colorValueRef.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: colorValueRef.value,
-    form: props.form,
-  });
-});
-
-const colorSelected = (value) => {
-  colorValueRef.value = value;
-  emit('update:modelValue', value, props.form);
-  isShow.value = false;
-};
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-const colorClick = (value) => {
-  colorSelected(value);
-  changeValue(value);
-};
-
-const restoreDefaultValue = () => {
-  colorValueRef.value = restoreValue;
-  emit('update:modelValue', restoreValue, props.form);
-};
-
-const validate = () => {
-  return colorRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue
deleted file mode 100644
index ec406ab0..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-input
-      ref="dateRef"
-      v-model="dateValue"
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="updateModelValue"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-      <template v-if="!props.form || (props.form && props.form.getStatus() !== 'view')" #append>
-        <q-icon :name="IconEnum.日期" class="cursor-pointer">
-          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-            <q-date v-model="dateValue" today-btn mask="YYYY-MM-DD" @update:model-value="dateSelected">
-              <div class="row items-center justify-end">
-                <q-btn v-close-popup label="关闭" color="primary" flat />
-              </div>
-            </q-date>
-          </q-popup-proxy>
-        </q-icon>
-      </template>
-    </q-input>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, useAttrs, watch } from 'vue';
-import { FormValidators } from '@/platform/components';
-import { IconEnum } from '@/platform/enums';
-
-const dateRef = ref();
-const attrs = useAttrs();
-const rules = attrs.rules;
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  type: {
-    type: String,
-    default: 'w-date',
-  },
-  modelValue: { type: String, default: '' },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-const dateValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    dateValue.value = newVal;
-  },
-);
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (dateRef?.value) {
-    dateRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: dateValue.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: dateValue.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: dateValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: dateValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', value, props.form);
-};
-const dateSelected = (value) => {
-  updateModelValue(value);
-  changeValue(value);
-};
-
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-
-const validate = () => {
-  return dateRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WFile.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WFile.vue
deleted file mode 100644
index b0362b50..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WFile.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-file
-      ref="fileRef"
-      v-model="fileValue"
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      :clearable="true"
-      v-bind="attrs"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="updateModelValue"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-      <template v-if="!props.form || (props.form && props.form.getStatus() !== 'view')" #append>
-        <q-icon name="attachment" />
-      </template>
-    </q-file>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, useAttrs, watch } from 'vue';
-import { FormValidators } from '@/platform/components';
-
-const fileRef = ref();
-const attrs = useAttrs();
-const rules = attrs.rules;
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: [File, Array], default: undefined },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-const fileValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    fileValue.value = newVal;
-  },
-);
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (fileRef?.value) {
-    fileRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: fileValue.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: fileValue.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: fileValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: fileValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', value, props.form);
-};
-
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-
-const validate = () => {
-  return fileRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WListGrid.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WListGrid.vue
deleted file mode 100644
index 66b4c34c..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WListGrid.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <w-grid ref="gridRef" v-bind="attrs"></w-grid>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useAttrs, ref, watch } from 'vue';
-
-const attrs = useAttrs();
-const rules = attrs.rules;
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: String, default: undefined },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-
-const gridRef =ref();
-const gridValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    gridValue.value = newVal;
-  },
-);
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (!showIfComputed.value) {
-    result = [];
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: gridValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.disableIf({
-    value: gridValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', value, props.form);
-  changeValue(value);
-};
-
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue
deleted file mode 100644
index 01a43d56..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-input
-      ref="numberRef"
-      v-model="numberValue"
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      type="number"
-      title=""
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="updateModelValue"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-    </q-input>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, useAttrs, watch } from 'vue';
-import { FormValidators } from '@/platform/components';
-
-const numberRef = ref();
-const attrs = useAttrs();
-const rules = attrs.rules;
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: Number, default: undefined },
-  precision: { type: Number, default: 0 },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-const numberValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    numberValue.value = newVal;
-  },
-);
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  result.push(FormValidators.maxPrecision(props.precision));
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (numberRef?.value) {
-    numberRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: numberValue.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: numberValue.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: numberValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: numberValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', Number(value), props.form);
-};
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-
-const validate = () => {
-  return numberRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WOptionGroup.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WOptionGroup.vue
deleted file mode 100644
index 9c4a46ee..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WOptionGroup.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div v-show="showIfComputed" class="border-solid border">
-    <div style="color: rgba(0, 0, 0, 0.6)" class="px-1">
-      {{ label }}
-    </div>
-    <q-separator />
-    <q-option-group
-      v-model="optionGroupValue"
-      v-bind="attrs"
-      :type="optionType"
-      :disable="disableIfComputed"
-      @update:model-value="updateModelValue"
-      @change="changeValue"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useAttrs, ref, watch } from 'vue';
-
-const attrs = useAttrs();
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: [Number, Boolean, String, Array], default: undefined },
-  type: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  optionType: {
-    type: String,
-    default: 'radio',
-  },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-const optionGroupValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    optionGroupValue.value = newVal;
-  },
-);
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: optionGroupValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.disableIf({
-    value: optionGroupValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', value, props.form);
-  changeValue(value);
-};
-
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WPassword.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WPassword.vue
deleted file mode 100644
index 7ace38b2..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WPassword.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-input
-      ref="pwdRef"
-      v-model="passwordValue"
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      type="password"
-      autocomplete="off"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="updateModelValue"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-    </q-input>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, useAttrs, watch } from 'vue';
-import { FormValidators } from '@/platform/components';
-
-const pwdRef = ref();
-const attrs = useAttrs();
-const rules = attrs.rules;
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: String, default: '' },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-const passwordValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    passwordValue.value = newVal;
-  },
-);
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (pwdRef?.value) {
-    pwdRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: passwordValue.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: passwordValue.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: passwordValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: passwordValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', value, props.form);
-};
-
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-
-const validate = () => {
-  return pwdRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WPosition.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WPosition.vue
deleted file mode 100644
index 82a8e639..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WPosition.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-input
-      ref="positionRef"
-      v-model="positionValueRef"
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="positionChanged"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
-      <template v-if="!props.form || (props.form && props.form.getStatus() !== 'view')" #append>
-        <!-- 选择位置按钮 -->
-        <q-btn
-          icon="bi-pin-angle"
-          size="10px"
-          padding="2px"
-          flat
-          square
-          unelevated
-          :title="$t('select')"
-          :style="{ border: '1px solid #e5e7eb', 'background-color': computedStoreBackgroundColorValue }"
-        >
-          <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]">
-            <div class="row q-col-gutter-sm q-pa-sm" style="width: 150px">
-              <div v-for="position in positionList" :key="position" class="col-4">
-                <q-btn
-                  unelevated
-                  :title="$t(position)"
-                  :color="positionValueRef == position ? 'primary' : ''"
-                  :style="{
-                    width: '100%',
-                    border: positionValueRef == position ? '' : '1px solid #dddddd',
-                  }"
-                  @click="positionChanged(position)"
-                ></q-btn>
-              </div>
-            </div>
-          </q-popup-proxy>
-        </q-btn>
-        <!-- 恢复默认值按钮 -->
-        <q-btn
-          v-if="restore"
-          icon="bi-arrow-counterclockwise"
-          size="10px"
-          padding="2px"
-          flat
-          square
-          unelevated
-          :title="$t('restore')"
-          :style="{ 'margin-left': '5px', border: '1px solid #e5e7eb', color: restoreValue, 'background-color': computedStoreBackgroundColorValue }"
-          @click="restoreDefaultValue"
-        ></q-btn>
-      </template>
-    </q-input>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, toRaw, computed, useAttrs, watch } from 'vue';
-import { Tools } from '@/platform';
-import { FormValidators } from '@/platform/components';
-
-const attrs = useAttrs();
-const rules = attrs.rules;
-const positionRef = ref();
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: String, default: '' },
-  restore: { type: Boolean, default: false },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-
-const positionList = ['top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right'];
-
-const isShow = ref(false);
-const positionValueRef = ref(props.modelValue || '');
-const restoreValue = toRaw(props.modelValue || '');
-
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    positionValueRef.value = newVal;
-  },
-);
-
-const computedStoreBackgroundColorValue = computed(() => {
-  const color: string = restoreValue;
-  if (color.toLowerCase() === 'white' || color.toLowerCase() === '#ffffff' || color.toLowerCase() === '#fff') {
-    return '#eee';
-  }
-  return undefined;
-});
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (positionRef?.value) {
-    positionRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: positionValueRef.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: positionValueRef.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: positionValueRef.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: positionValueRef.value,
-    form: props.form,
-  });
-});
-
-const positionChanged = (value) => {
-  positionValueRef.value = value;
-  emit('update:modelValue', value, props.form);
-  isShow.value = false;
-  changeValue(value);
-};
-
-const restoreDefaultValue = () => {
-  positionValueRef.value = restoreValue;
-  emit('update:modelValue', restoreValue, props.form);
-};
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-
-const validate = () => {
-  return positionRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WQueryCondition.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WQueryCondition.vue
deleted file mode 100644
index c226d6d5..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WQueryCondition.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-<script setup lang="ts">
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue
deleted file mode 100644
index fa6db36b..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-select
-      ref="selectRef"
-      v-model="selectValue"
-      emit-value
-      map-options
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="updateModelValue"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-    </q-select>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, useAttrs, watch } from 'vue';
-import { FormValidators } from '@/platform/components';
-
-const selectRef = ref();
-const attrs = useAttrs();
-const rules = attrs.rules;
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: [String, Number, Boolean, Array], default: '' },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-const selectValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    selectValue.value = newVal;
-  },
-);
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (selectRef?.value) {
-    selectRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: selectValue.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: selectValue.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: selectValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: selectValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', value, props.form);
-  changeValue(value);
-};
-
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-
-const validate = () => {
-  return selectRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WSelectUserText.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WSelectUserText.vue
deleted file mode 100644
index 3f93fea4..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WSelectUserText.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <div>
-    <q-input
-      v-show="!hideIfComputed"
-      ref="textRef"
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      type="text"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-    </q-input>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, useAttrs } from 'vue';
-import { FormValidators } from '@/platform/components';
-
-const textRef = ref();
-const attrs = useAttrs();
-const inRules = attrs.rules;
-const props = defineProps({
-  hideIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-
-const rulesComputed = computed(() => {
-  let rules = inRules || <any>[];
-  if (!hideIfComputed.value && requiredIfComputed.value) {
-    rules.push(FormValidators.required());
-  } else if (hideIfComputed.value) {
-    rules = [];
-  }
-  if (textRef?.value) {
-    textRef.value.resetValidation();
-  }
-  return rules;
-});
-
-const hideIfComputed = computed(() => {
-  return props.hideIf(props.form);
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  return props.readOnlyIf(props.form);
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
-});
-
-const validate = () => {
-  return textRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue
deleted file mode 100644
index f06ef7cb..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-input
-      ref="textRef"
-      v-model="textValue"
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      type="text"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="updateModelValue"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-    </q-input>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, useAttrs, watch } from 'vue';
-import { FormValidators } from '@/platform/components';
-
-const textRef = ref();
-const attrs = useAttrs();
-const rules = attrs.rules;
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: String, default: '' },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-const textValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    textValue.value = newVal;
-  },
-);
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (textRef?.value) {
-    textRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: textValue.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: textValue.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: textValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: textValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', value, props.form);
-};
-
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-
-const validate = () => {
-  return textRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue
deleted file mode 100644
index 8c68b5d0..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-input
-      ref="textBtnRef"
-      v-model="textBtnValue"
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      type="text"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @focus="() => {}"
-      @update:model-value="updateModelValue"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-      <template v-if="attrs.button && attrs.buttonPosition === 'prepend' && (!props.form || (props.form && props.form.getStatus() !== 'view'))" #prepend>
-        <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
-      </template>
-      <template v-else-if="attrs.button && attrs.buttonPosition === 'before' && (!props.form || (props.form && props.form.getStatus() !== 'view'))" #before>
-        <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
-      </template>
-      <template v-else-if="attrs.button && attrs.buttonPosition === 'after' && (!props.form || (props.form && props.form.getStatus() !== 'view'))" #after>
-        <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
-      </template>
-      <template v-else-if="attrs.button && props.form && (!props.form || (props.form && props.form.getStatus() !== 'view'))" #append>
-        <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
-      </template>
-    </q-input>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, useAttrs, watch } from 'vue';
-import { FormValidators } from '@/platform/components';
-
-const textBtnRef = ref();
-const attrs = useAttrs();
-const rules = attrs.rules;
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: String, default: '' },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-const textBtnValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    textBtnValue.value = newVal;
-  },
-);
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (textBtnRef?.value) {
-    textBtnRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: textBtnValue.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: textBtnValue.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: textBtnValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: textBtnValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', value, props.form);
-};
-
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-
-const validate = () => {
-  return textBtnRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue
deleted file mode 100644
index 6a6c42e5..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-input
-      ref="textareaRef"
-      v-model="textareaValue"
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      type="textarea"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="updateModelValue"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-    </q-input>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, useAttrs, watch } from 'vue';
-import { FormValidators } from '@/platform/components';
-
-const textareaRef = ref();
-const attrs = useAttrs();
-const rules = attrs.rules;
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: String, default: '' },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-const textareaValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    textareaValue.value = newVal;
-  },
-);
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (textareaRef?.value) {
-    textareaRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: textareaValue.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: textareaValue.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: textareaValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: textareaValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', value, props.form);
-};
-
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-
-const validate = () => {
-  return textareaRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WTreeSelect.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WTreeSelect.vue
deleted file mode 100644
index 1393eeeb..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WTreeSelect.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
-  <div v-show="showIfComputed">
-    <q-select
-      ref="selectRef"
-      v-model="selectValue"
-      emit-value
-      map-options
-      :hide-bottom-space="true"
-      :hide-hint="true"
-      :outlined="true"
-      :dense="true"
-      v-bind="attrs"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="updateModelValue"
-      @change="changeValue"
-    >
-      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-      <template #option="scope">
-        <q-item v-bind="scope.itemProps">
-          <q-item-section avatar style="width: 30px">
-            <q-icon name="folder" color="amber" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>{{ scope.opt.label }}</q-item-label>
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, useAttrs, watch } from 'vue';
-import { FormValidators } from '@/platform/components';
-
-const selectRef = ref();
-const attrs = useAttrs();
-const rules = attrs.rules;
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: [String, Number, Boolean, Array], default: '' },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
-});
-const emit = defineEmits(['update:modelValue', 'change']);
-const selectValue = ref(props.modelValue);
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    selectValue.value = newVal;
-  },
-);
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (selectRef?.value) {
-    selectRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: selectValue.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: selectValue.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: selectValue.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: selectValue.value,
-    form: props.form,
-  });
-});
-
-const updateModelValue = (value) => {
-  emit('update:modelValue', value, props.form);
-  changeValue(value);
-};
-
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
-};
-
-const validate = () => {
-  return selectRef.value.validate();
-};
-
-defineExpose({
-  validate,
-});
-</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
index 8f639361..8e7da198 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue
@@ -15,6 +15,7 @@
       :get-row-component-refs="getRowComponentRefs"
       :set-old-value="setOldValue"
       :no-data-tr-colspan="noDataTrColspan"
+      :updates="updates"
     ></TreeGridRow>
   </template>
   <template v-else>
@@ -65,7 +66,7 @@
 </template>
 <script setup lang="ts">
 import { computed, inject, ref, toRaw } from 'vue';
-import { Tools } from '@/platform';
+import { Tools, noErrorAxios, NotifyManager, t } from '@/platform';
 import { draggableImage } from './ts/grid';
 import TreeGridRow from './TreeGridRow.vue';
 import GridTd from './GridTd.vue';
@@ -201,6 +202,37 @@ const gridTrMiddleHeightComputed = computed(() => {
   }
 });
 
+// 批量更新数据
+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) => {
+      const response = error?.response;
+      const status = response?.status;
+      const data = response?.data;
+      if (data?.code === 1001) {
+        NotifyManager.error('服务器验证未通过');
+      } else {
+        //其他错误
+        if (status === 500) {
+          NotifyManager.error(t(data?.errorMessageI18nKey));
+        } else {
+          NotifyManager.error(t(status));
+        }
+      }
+    });
+};
+
 // 拖拽开始
 const onDragStart = (e, scope) => {
   const img = new Image();
@@ -298,7 +330,7 @@ const onDrop = (e, scope) => {
   });
   if (typeof props.grid.props.draggable === 'boolean' && props.grid.props.draggable) {
     // 访问后端更新排序
-    props.grid.updates(updateData);
+    updates(updateData, () => {});
   }
 
   props.afterRowDraggable(updateData);
@@ -309,7 +341,7 @@ const updateTicked = (evt: Event, row: any) => {
     props.getRow(table.rows, row[props.rowKeyName], false)[table.selectedField] = row[table.tickedField];
     props.allTickedStatus();
     if (props.grid.props.onUpdateTicked) {
-      props.grid.emit('updateTicked', evt, row);
+      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];
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
index ad238a2f..42297a47 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridConfig.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/GridConfig.vue
@@ -271,6 +271,6 @@ const showColumn = (name) => {
 };
 
 const denseChange = () => {
-  props.grid.stickyHeaderColumn(0);
+  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
index dee83edb..c4f965e8 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridEditToolbar.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/GridEditToolbar.vue
@@ -132,17 +132,21 @@ const rowSave = (args) => {
   let localeUpdateFlag = false;
   let url = '';
   // 执行保存
-  props.grid.emit('beforeEditorDataSubmit', data, (handlerRequestParams: any | boolean, localeUpdate: boolean = false) => {
-    if (typeof handlerRequestParams === 'boolean' && handlerRequestParams === false) {
-      submitFlag = false;
-    } else {
-      data = handlerRequestParams;
-    }
-    localeUpdateFlag = localeUpdate;
+  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.replaceRow(data);
+    props.grid.updateLocalData(data);
     table.bodyEditStatus = 'none';
   } else {
     if (submitFlag) {
@@ -160,12 +164,12 @@ const rowSave = (args) => {
       };
       noErrorAxios(requestParams)
         .then((resp) => {
-          props.grid.emit('afterEditorDataSubmit', resp.data);
+          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.replaceRow(data);
+            props.grid.updateLocalData(data);
           }
           // 保存成功后退出编辑状态
           table.bodyEditStatus = 'none';
@@ -229,29 +233,33 @@ const rowsSave = (args) => {
   let submitFlag = true;
   let localeUpdateFlag = false;
   // 执行保存
-  props.grid.emit('beforeEditorDataSubmit', data, (handlerRequestParams: any | boolean, localeUpdate: boolean = false) => {
-    if (typeof handlerRequestParams === 'boolean' && handlerRequestParams === false) {
-      submitFlag = false;
-    } else {
-      data = handlerRequestParams;
-    }
-    localeUpdateFlag = localeUpdate;
+  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) {
     // 只进行本地修改，不访问服务器
     data.forEach((item) => {
-      props.grid.replaceRow(item);
+      props.grid.updateLocalData(item);
     });
     table.bodyEditStatus = 'none';
   } else {
     if (submitFlag) {
-      props.grid.updates(data, (callbackData) => {
+      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.replaceRow(item);
+            props.grid.updateLocalData(item);
           });
         }
         // 保存成功后退出编辑状态
@@ -275,6 +283,37 @@ const save = async (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) => {
+      const response = error?.response;
+      const status = response?.status;
+      const data = response?.data;
+      if (data?.code === 1001) {
+        NotifyManager.error('服务器验证未通过');
+      } else {
+        //其他错误
+        if (status === 500) {
+          NotifyManager.error(t(data?.errorMessageI18nKey));
+        } else {
+          NotifyManager.error(t(status));
+        }
+      }
+    });
+};
+
 const showRowEditButtonComputed = computed(() => {
   if (table.bodyEditStatus === 'rowEdit' && isSelectedRowComputed.value) {
     return true;
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
index 1f1c4ce5..d6315920 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridEditor.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/GridEditor.vue
@@ -59,13 +59,17 @@ const save = async () => {
     }
     let submitFlag = true;
     let closeDialog = true;
-    props.grid.emit('beforeEditorDataSubmit', dialogFormData, (handlerRequestParams: any | boolean, closeFlag: boolean = true) => {
-      if (typeof handlerRequestParams === 'boolean' && handlerRequestParams === false) {
-        submitFlag = false;
-      } else {
-        dialogFormData = handlerRequestParams;
-      }
-      closeDialog = closeFlag;
+    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') {
@@ -91,7 +95,7 @@ const save = async () => {
       noErrorAxios(requestParams)
         .then((resp) => {
           dialog.dialogButtons[0].loading = false;
-          props.grid.emit('afterEditorDataSubmit', resp.data);
+          props.grid.emit('afterEditorDataSubmit', { grid: props.grid, data: resp.data });
           NotifyManager.info(t('tip.operationSuccess'));
           if (closeDialog) {
             dialogRef.value.hide();
@@ -170,7 +174,7 @@ const addData = (rowData) => {
     addTreeRow(rowData);
     props.setRowDataExtraProperty(table.rows);
   } else {
-    props.grid.addRow(rowData, false);
+    props.grid.addLocalData(rowData, false);
   }
 };
 const updateData = (rowData) => {
@@ -180,7 +184,7 @@ const updateData = (rowData) => {
   if (selected['children']) {
     rowData['children'] = selected['children'];
   }
-  props.grid.replaceRow(rowData);
+  props.grid.updateLocalData(rowData);
 };
 
 const getMethod = (formStatus: string) => {
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridHeader.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridHeader.vue
index 51547df3..dd507d12 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridHeader.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/GridHeader.vue
@@ -188,7 +188,7 @@ const allTickedUpdateFun = (value, evt) => {
   } else if (table.bodyEditStatus === 'rowsEdit') {
     table.allTicked = false;
   }
-  props.grid.emit('updateTickeds', value);
+  props.grid.emit('updateTickeds', { grid: props.grid, value: value });
 };
 
 const handlerStickyChildrenColumn = (item, columns) => {
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
index e1cb9fe8..3c38b53f 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridTop.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/GridTop.vue
@@ -157,7 +157,7 @@ const edit = (selected) => {
       props.grid.getEditorDialog().setTitle(t('action.edit'));
       props.grid.getEditorForm().setStatus('edit');
       props.grid.getEditorForm().setData(selected);
-      props.grid.emit('afterEditorOpen', selected);
+      props.grid.emit('afterEditorOpen', { grid: props.grid, data: selected });
     });
   }
 };
@@ -172,7 +172,7 @@ const clone = (selected) => {
       props.grid.getEditorDialog().setTitle(t('action.copy'));
       props.grid.getEditorForm().setStatus('clone');
       props.grid.getEditorForm().setData(selected);
-      props.grid.emit('afterEditorOpen', selected);
+      props.grid.emit('afterEditorOpen', { grid: props.grid, data: selected });
     });
   }
 };
@@ -195,20 +195,35 @@ const remove = () => {
     url: props.url.removeDataUrl || props.url.dataUrl,
     data: ids,
   };
-  axios(requestParams)
-    .then((resp) => {
-      props.grid.emit('afterRemove', resp?.data);
-      NotifyManager.info(t('tip.operationSuccess'));
-      if (props.grid.props.refreshData || !props.grid.props.tree) {
-        props.grid.refresh();
+  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 {
-        props.grid.removeRows(resp?.data);
+        flag = false;
       }
-    })
-    .catch((error) => {
-      console.error(error);
-      console.info('==========error==========', error);
-    });
+    },
+  });
+  if (flag) {
+    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(error);
+        console.info('==========error==========', error);
+      });
+  }
 };
 
 const getExportData = async () => {
@@ -322,7 +337,7 @@ const buttonObj = reactive({
       nextTick(() => {
         props.grid.getEditorDialog().setTitle(t('action.addNew'));
         props.grid.getEditorForm().setStatus('add');
-        props.grid.emit('afterEditorOpen');
+        props.grid.emit('afterEditorOpen', { grid: props.grid, data: undefined });
       });
     },
   },
@@ -352,7 +367,7 @@ const buttonObj = reactive({
       }
       return false;
     },
-    click: (args) => {
+    click: () => {
       table.bodyEditStatus = 'rowEdit';
     },
   },
@@ -361,7 +376,7 @@ const buttonObj = reactive({
     icon: 'app_registration',
     labelI18nKey: 'action.edit',
     label: t('action.edit'),
-    click: (args) => {
+    click: () => {
       table.bodyEditStatus = 'rowsEdit';
       // 清空勾选与选中
       props.grid.cleanSelected();
@@ -380,8 +395,8 @@ const buttonObj = reactive({
       }
       return false;
     },
-    click: (args) => {
-      clone(args.selected);
+    click: () => {
+      clone(props.grid.getSelectedRow());
     },
   },
   remove: {
@@ -475,7 +490,7 @@ const buttonObj = reactive({
       nextTick(() => {
         props.grid.getEditorDialog().setTitle(t('action.addTop'));
         props.grid.getEditorForm().setStatus('addTop');
-        props.grid.emit('afterEditorOpen');
+        props.grid.emit('afterEditorOpen', { grid: props.grid, data: undefined });
       });
     },
   },
@@ -495,20 +510,24 @@ const buttonObj = reactive({
       nextTick(() => {
         props.grid.getEditorDialog().setTitle(t('action.addChild'));
         props.grid.getEditorForm().setStatus('addChild');
-        props.grid.emit('afterEditorOpen');
+        props.grid.emit('afterEditorOpen', { grid: props.grid, data: undefined });
       });
     },
   },
   expand: {
     name: 'expand',
-    icon: (args) => {
+    icon: () => {
       return table.treeExpand ? 'expand_less' : 'expand_more';
     },
-    label: (args) => {
+    label: () => {
       return table.treeExpand ? t('action.collapseAll') : t('action.expandAll');
     },
     click: () => {
-      props.grid.expandFun(table.rows, table.treeExpand);
+      if (table.treeExpand) {
+        props.grid.collapse();
+      } else {
+        props.grid.expand();
+      }
       table.treeExpand = !table.treeExpand;
     },
   },
@@ -642,12 +661,25 @@ onBeforeMount(() => {
 
 defineExpose({
   setLocaleFlag,
-  edit,
   handlerQueryFormShowField,
   handleToolbarActions,
   resetLabel,
   dbClickOperation,
   getQueryForm,
+
+  reset: buttonObj.reset.click,
+  add: buttonObj.add.click,
+  edit,
+  rowEdit: buttonObj.rowEdit.click,
+  rowsEdit: buttonObj.rowsEdit.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>
 
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
index 8f6f30f8..682fcbf9 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/TreeGridRow.vue
@@ -123,6 +123,7 @@
       :get-row-component-refs="props.getRowComponentRefs"
       :set-old-value="props.setOldValue"
       :no-data-tr-colspan="props.noDataTrColspan"
+      :updates="props.updates"
     ></TreeGridRow>
   </template>
 </template>
@@ -200,6 +201,10 @@ const props = defineProps({
       return 0;
     },
   },
+  updates: {
+    type: Function,
+    default: () => {},
+  },
 });
 const table = inject('table');
 
@@ -398,7 +403,7 @@ const onDragStart = (e, dataRow) => {
   ) {
     table.dragRecords = selecteds;
   } else {
-    props.grid.cleanSelected();
+    props.grid.clearSelected();
     // 触发选择
     dataRow[table.selectedField] = true;
     table.dragRecords = [dataRow];
@@ -666,7 +671,7 @@ const onDrop = (e, dataRow) => {
 
   // 请求后端更新排序
   if (typeof props.grid.props.draggable === 'boolean' && props.grid.props.draggable && updateOrderData?.length > 0) {
-    props.grid.updates(updateOrderData);
+    props.updates(updateOrderData);
   }
 
   props.afterRowDraggable(updateOrderData);
@@ -675,7 +680,7 @@ const onDrop = (e, dataRow) => {
 const click = (evt, row, rowIndex) => {
   if (table.bodyEditStatus === 'none') {
     if (!evt.ctrlKey) {
-      props.grid.cleanSelected();
+      props.grid.clearSelected();
     }
     row[table.selectedField] = true;
     if (props.grid.props.onRowClick) {
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 530e7a6c..08ff4949 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
@@ -114,7 +114,7 @@
 <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, noErrorAxios, NotifyManager, Environment, TreeBuilder, VueTools, Tools, eventBus } from '@/platform';
+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';
@@ -146,6 +146,7 @@ const props = defineProps({
   height: { type: Number, default: 0 }, // 表格高度
   title: { type: String, default: '' }, // 表格标题
   autoFetchData: { type: Boolean, default: true }, // 自动加载数据
+  // localMode: { type: Boolean, default: false },// 本地模式，启用该模式后，除了查询数据依旧通过 autoFetchData 控制外，其他所有与后端交互的请求都失效，同时分页属性也失效
   draggable: { type: [Boolean, String], default: false }, // 是否启用行拖拽，默认不启用，布尔true为启用行拖拽且访问后端进行排序，字符串local为本地排序，只根据配置的字段进行本地排序，不会将数据发送至后端。
   draggableOrderBy: { type: String, default: 'order' }, // 拖拽排序时根据哪个字段进行排序
   pageable: { type: Boolean, default: true }, // 是否需要分页，当启用树形表格模式时该属性失效，树形表格不支持分页。
@@ -161,7 +162,7 @@ const props = defineProps({
   denseBottom: { type: Boolean, default: undefined }, // 表格底部分页栏紧凑模式
   denseToolbar: { type: Boolean, default: true }, // 表格toolbar按钮栏紧凑模式
   sortNo: { type: Boolean, default: false }, // 是否显示排序号
-  stickyNum: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，目前支持1-10列。，暂时不提供了以后放到列属性中，参考el
+  stickyNum: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，支持1-10列。
   checkboxSelection: { type: Boolean, default: true }, // checkbox选择模式，默认启用
   tickedField: { type: String, default: 'ticked' }, // 行数据中记录checkbox勾选状态的字段名
   selectedField: { type: String, default: 'selected' }, // 行数据中记录行点击选中状态的字段名
@@ -260,7 +261,7 @@ const props = defineProps({
   },
   // 作为form中的组件使用----start
   showIf: {
-    type: Function,
+    type: [Boolean, Function],
     default: () => {
       return true;
     },
@@ -289,49 +290,29 @@ const props = defineProps({
 });
 const emit = defineEmits<{
   // 行点击事件
-  (e: 'rowClick', evt: Event, row: any, index: number): void;
+  (e: 'rowClick', args: object): void;
   // 行双击事件
-  (e: 'rowDbClick', evt: Event, row: any, index: number): void;
+  (e: 'rowDbClick', args: object): void;
   // 行数据checkbox勾选状态改变事件
-  (e: 'updateTicked', evt: Event, row: any): void;
+  (e: 'updateTicked', args: object): void;
   // 表格列头全部勾选checkbox状态改变事件
-  (e: 'updateTickeds', value: boolean): void;
-  (
-    e: 'beforeRequestData', // 表格请求数据前触发事件
-    requestParams: URLSearchParams | any, // 第一个参数，请求参数
-    callback: any, // 回调函数
-  ): void;
-  (
-    e: 'afterRequestData', // 表格请求数据完成后触发事件
-    data: any, // 请求的参数
-  ): void;
-  (
-    e: 'beforeEditorDataSubmit', // 内置新增编辑功能数据提交前触发事件
-    data: any, // 第一个参数，提交的数据对象
-    callback: any,
-  ): void; // 返回值：处理完成后的数据对象
-  (
-    e: 'afterEditorDataSubmit', // 内置新增编辑功能数据提交完成后触发事件
-    responseResult: any, // 第一个参数，请求响应结果
-  ): void;
-  (
-    e: 'beforeRemove', // 内置删除功能提交完成前回调函数
-    data: Array<any | string>, // 第一个参数，删除提交的数据
-    callback: any,
-  ): void; // 返回值：处理完成后的数据
-  (
-    e: 'afterRemove', // 内置删除功能提交完成后回调函数
-    responseResult: any, // 第一个参数，请求响应结果
-  ): void;
-  (
-    e: 'afterEditorOpen', // 新增窗口打开之后
-    editData: any,
-  ): void;
-  (
-    e: 'afterRowDraggable', // 行拖拽完成后
-    grid: any,
-    data: any,
-  ): void;
+  (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: 'afterRowDraggable', args: object): void;
 }>();
 
 const rawColumns = ref(props.columns);
@@ -373,7 +354,7 @@ eventBus.on('onLocaleChanged', (local) => {
     topRef.value?.handleToolbarActions();
     // 重构内置新增编辑窗口中的按钮 label
     editorRef.value?.resetButtonLabel();
-    stickyHeaderColumn();
+    refreshStyle();
   });
 });
 
@@ -402,21 +383,16 @@ const table = reactive({
 provide('table', table);
 
 const showIfComputed = computed(() => {
-  return props.showIf({
-    value: null,
-    form: props.form,
-  });
+  if (typeof props.showIf === 'function') {
+    return props.showIf({
+      value: null,
+      form: props.form,
+    });
+  } else {
+    return props.showIf;
+  }
 });
 
-const expandFun = (arr, treeExpand) => {
-  arr.forEach((item) => {
-    if (props.tree && item.children && item.children.length > 0) {
-      item[rowDataExtraPropertyName.expand] = !treeExpand;
-      expandFun(item.children, treeExpand);
-    }
-  });
-};
-
 const denseHeaderComputed = computed(() => {
   if (table.denseHeader) {
     return true;
@@ -583,21 +559,21 @@ const rowClick = (evt: any, row: any, index: any) => {
   if (table.bodyEditStatus === 'none') {
     // 非树形表格行点击选中与checkbox绑定，即行选中时checkbox也勾选，checkbox勾选时行选中。
     if (!evt.ctrlKey) {
-      cleanSelected();
-      cleanTicked();
+      clearSelected();
+      clearTicked();
     }
     row[table.selectedField] = true;
     row[table.tickedField] = true;
     allTickedStatus();
     if (props.onRowClick) {
-      emit('rowClick', evt, row, index);
+      emit('rowClick', { grid: instance, evt, row, index });
     }
   }
 };
 const rowDbClick = (evt, row, index) => {
   if (table.bodyEditStatus === 'none') {
     if (props.onRowDbClick) {
-      emit('rowDbClick', evt, row, index);
+      emit('rowDbClick', { grid: instance, evt, row, index });
     } else if (props.dbClickOperation === 'view') {
       viewRef.value?.view();
     } else if (props.dbClickOperation !== 'none') {
@@ -646,6 +622,42 @@ type CriteriaType = {
 };
 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') {
+    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);
@@ -659,11 +671,8 @@ const buildQueryCriterias = (reqParams) => {
       const queryFormData = queryForm.getData();
       Object.keys(queryFormData).forEach((item) => {
         if (!Tools.isEmpty(queryFormData[item])) {
-          const criteria = <CriteriaType>{
-            fieldName: item,
-            operator: queryFormFieldsMap.get(item).queryOperator || OperatorTypeEnum.contains,
-            value: queryFormData[item],
-          };
+          // 根据数据进行operator处理
+          const criteria = buildCriteria(queryFormData[item], item);
           urlSearchParams.append('criteria', JSON.stringify(criteria));
         }
       });
@@ -693,8 +702,12 @@ const requestHandler = async (ops) => {
   // 后台 RestCrudController 查询
   let urlSearchParams = buildQueryCriterias(reqParams);
   // const urlSearchParams = buildQueryEntity(reqParams);
-  emit('beforeRequestData', urlSearchParams, (handlerRequestParams: URLSearchParams | any) => {
-    urlSearchParams = handlerRequestParams;
+  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);
@@ -767,8 +780,8 @@ const onRequest = async (ops: any) => {
   state.pagination.descending = ops.pagination.descending;
   setRowDataExtraProperty(table.rows);
   allTickedStatus();
-  stickyHeaderColumn(100);
-  emit('afterRequestData', table.rows);
+  refreshStyle(100);
+  emit('afterRequestData', { grid: instance, rows: toRaw(table.rows) });
   // 判断数据加载后是否默认展开，是的话直接展开树形表格
   if (table.treeExpand) {
     expandFun(table.rows, false);
@@ -903,252 +916,6 @@ const setOldValue = (rowData) => {
   });
 };
 
-const getLocalData = () => {
-  return toRaw(table.rows);
-};
-// 替换全部行
-const setLocalData = (rows: any) => {
-  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;
-    stickyHeaderColumn();
-  }, 100);
-};
-
-const replaceRowHandler = (arr, row) => {
-  for (let i = 0; i < arr.length; i++) {
-    if (row[props.primaryKey] === arr[i][props.primaryKey]) {
-      arr[i] = { ...arr[i], ...row };
-      break;
-    } else if (props.tree && arr[i].children && arr[i].children.length > 0) {
-      replaceRowHandler(arr[i].children, row);
-    }
-  }
-};
-// 替换单行数据
-const replaceRow = (row) => {
-  replaceRowHandler(table.rows, row);
-};
-
-const removeTreeRows = (arr, rowIds) => {
-  arr.forEach((item, index) => {
-    if (rowIds.includes(item[props.primaryKey])) {
-      arr.splice(index, 1);
-    } else if (item.children && item.children.length > 0) {
-      removeTreeRows(item.children, rowIds);
-    }
-  });
-};
-
-// 删除选中数据
-const removeRows = (rows) => {
-  if (props.tree) {
-    removeTreeRows(table.rows, rows);
-    setRowDataExtraProperty(table.rows);
-  } else {
-    rows.forEach((item) => {
-      table.rows.splice(
-        table.rows.findIndex((v) => {
-          return v[rowKey_] === item[rowKey_];
-        }),
-        1,
-      );
-    });
-    state.pagination.rowsNumber = table.rows.length;
-    stickyHeaderColumn();
-  }
-};
-// 新增一行数据
-const addRow = (row, index) => {
-  if (!index || index >= table.rows.length) {
-    table.rows.push(row);
-  } else {
-    table.rows.splice(index, 0, row);
-  }
-  setRowDataExtraProperty(table.rows);
-  state.pagination.rowsNumber = table.rows.length;
-  stickyHeaderColumn();
-};
-
-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);
-    }
-  });
-};
-
-// 获得行选中的第一条记录
-const getSelectedRow = () => {
-  const selectedRows = [];
-  getSelectRowsByFieldName(table.rows, selectedRows, table.selectedField);
-  if (selectedRows && selectedRows.length > 0) {
-    return toRaw(selectedRows)[0];
-  } else {
-    return undefined;
-  }
-};
-// 获得行选中的所有记录
-const getSelectedRows = () => {
-  const selectedRows = [];
-  getSelectRowsByFieldName(table.rows, selectedRows, table.selectedField);
-  return toRaw(selectedRows);
-};
-// 获得checkbox勾选的第一条记录
-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勾选的所有记录
-const getTickedRows = (containsNullStatus: boolean = false) => {
-  const tickedRows = [];
-  getSelectRowsByFieldName(table.rows, tickedRows, table.tickedField, containsNullStatus);
-  return toRaw(tickedRows);
-};
-
-const getRows = () => {
-  return toRaw(table.rows);
-};
-
-const refresh = () => {
-  nextTick(() => {
-    onRequest({
-      pagination: state.pagination,
-    });
-    table.allTicked = false;
-  });
-};
-
-const stickyHeaderColumn = (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.tableTitleWidth = tableRef.value.$el.getElementsByClassName('_table-title')[0]?.clientWidth;
-      // 判断是否有数据，没数据修改 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;
-        titleTotalHeight = 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');
-  }
-};
-
 watchEffect(() => {
   url.dataUrl = props.dataUrl;
   url.fetchDataUrl = props.fetchDataUrl;
@@ -1178,7 +945,7 @@ watchEffect(() => {
     flag = true;
   }
   if (flag && tableRef?.value) {
-    stickyHeaderColumn(10);
+    refreshStyle(10);
   }
 });
 
@@ -1222,41 +989,10 @@ const tableClassComputed = computed(() => {
 
 const afterRowDraggable = (updateData) => {
   if (!Tools.isUndefined(props.onAfterRowDraggable)) {
-    emit('afterRowDraggable', instance, updateData);
+    emit('afterRowDraggable', { grid: instance, data: updateData });
   }
 };
 
-// 批量更新数据
-const updates = (data, callback) => {
-  const requestParams = {
-    method: 'PUT',
-    headers: { 'content-type': 'application/json;charset=utf-8;' },
-    data: data,
-    url: url.dataUrl + '/updates',
-  };
-  noErrorAxios(requestParams)
-    .then((resp) => {
-      if (!Tools.isEmpty(callback)) {
-        callback(resp?.data);
-      }
-    })
-    .catch((error) => {
-      const response = error?.response;
-      const status = response?.status;
-      const data = response?.data;
-      if (data?.code === 1001) {
-        NotifyManager.error('服务器验证未通过');
-      } else {
-        //其他错误
-        if (status === 500) {
-          NotifyManager.error(t(data?.errorMessageI18nKey));
-        } else {
-          NotifyManager.error(t(status));
-        }
-      }
-    });
-};
-
 onMounted(() => {
   if (tableColumns.value && tableColumns.value.length > rawColumns.value.length) {
     headerRef.value?.handlerMoreRowColumnTitle();
@@ -1267,15 +1003,178 @@ onMounted(() => {
       pagination: state.pagination,
     });
   } else {
-    stickyHeaderColumn();
+    refreshStyle();
   }
 });
 
-const getQueryForm = () => {
-  return topRef.value?.getQueryForm();
+/**
+ * 获取表格中的行记录
+ * @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 getEditorDialog = () => {
-  return editorRef.value?.getDialog();
+
+// 根据传入的数据获取表格行记录，返回数组
+const getGridRows = (target) => {
+  const result = [];
+  if (target && Array.isArray(target) && target.length > 0) {
+    target.forEach((item) => {
+      const row = getRow(table.rows, typeof item === 'object' ? item[props.primaryKey] : item, false, props.primaryKey);
+      if (row) {
+        result.push(row);
+      }
+    });
+  } else if (!Tools.isEmpty(target)) {
+    const row = getRow(table.rows, typeof target === 'object' ? target[props.primaryKey] : target, false, props.primaryKey);
+    if (row) {
+      result.push(row);
+    }
+  }
+  return result;
+};
+
+// =========获取数据相关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;
+};
+/**
+ * 获取选择的行记录及所有子记录
+ * @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 getEditorForm = () => {
   return editorRef.value?.getForm();
@@ -1286,6 +1185,262 @@ const 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.selectedField] = 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);
+  }
+};
+// =========表格操作相关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);
+  }
+};
+/**
+ * 新增本地记录
+ * @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 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) => {
+      replaceRowHandler(table.rows, item, columnName);
+    });
+  } else if (data) {
+    replaceRowHandler(table.rows, data, columnName);
+  }
+};
+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);
+    }
+  });
+};
+/**
+ * 删除本地数据 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) => {
+            return v[props.primaryKey] === item[props.primaryKey] || v[rowKey_] === item[rowKey_];
+          }),
+          1,
+        );
+      });
+      state.pagination.rowsNumber = table.rows.length;
+    }
+    refreshStyle();
+  }
+};
+// =========本地数据模式相关API=========end
+
+// =========修改表格配置相关API=========start
+/**
+ * 设置查询criteria
+ * @param criteria criteria对象
+ * return 无返回
+ */
 const setQueryCriteria = (criteria) => {
   queryCriteria = criteria;
 };
@@ -1302,144 +1457,254 @@ const setQueryCriteriaFieldValueHandler = (criteria, fieldName, fieldValue) => {
     criteria.value = fieldValue;
   }
 };
+/**
+ * 设置查询criteria中的字段值
+ * @param fieldName 字段名称
+ * @param fieldValue 字段值
+ * @return 无返回
+ */
 const setQueryCriteriaFieldValue = (fieldName, fieldValue) => {
   if (Object.keys(queryCriteria).length === 0) {
-    console.error('queryCriteria NOT setting,  can NOT execute setQueryCriteriaFieldValue method');
+    console.error('queryCriteria Not Setting');
     return;
   }
   setQueryCriteriaFieldValueHandler(queryCriteria, fieldName, fieldValue);
 };
+// 设置数据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_;
 };
-// 清空行选中记录
-const cleanSelected = (arr = table.rows) => {
-  arr.forEach((item) => {
-    item[table.selectedField] = false;
-    if (props.tree && item.children && item.children.length > 0) {
-      cleanSelected(item.children);
-    }
-  });
+// =========修改表格配置相关API=========end
+
+// =========内置按钮API=========start
+const reset = () => {
+  topRef.value?.reset();
 };
-// 清空checkbox勾选记录
-const cleanTicked = (arr = table.rows) => {
-  arr.forEach((item) => {
-    item[table.tickedField] = false;
-    if (props.tree && item.children && item.children.length > 0) {
-      cleanTicked(item.children);
-    }
+const refresh = () => {
+  nextTick(() => {
+    onRequest({
+      pagination: state.pagination,
+    });
+    table.allTicked = false;
   });
 };
-
-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);
-      }
-    });
+const add = () => {
+  topRef.value?.add();
+};
+const edit = (rowData) => {
+  if (!Tools.isEmpty(rowData)) {
+    topRef.value?.edit(rowData);
   }
-  return data;
 };
-// 获取选择的行记录及所有子记录
-const getCascadeChildren = (propertyName: string) => {
-  return getCascadeChildrenData([getSelectedRow()], propertyName);
+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
 /**
- * 获取表格中的行记录
- * @param arr 查找的记录集
- * @param key 查找的 rowKey_
- * @param parentFlag 根据 foreignKey 查找记录标识
+ * 获得表格对象html对象
+ * @return element对象
  */
-const getRow = (arr, key, parentFlag: boolean) => {
-  let result = undefined;
-  for (let i = 0; i < arr.length; i++) {
-    let item = arr[i];
-    if (parentFlag ? item[props.primaryKey] === key : item[rowKey_] === 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;
+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.tableTitleWidth = tableRef.value.$el.getElementsByClassName('_table-title')[0]?.clientWidth;
+      // 判断是否有数据，没数据修改 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;
+        titleTotalHeight = 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';
   }
-  return result;
-};
-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);
+  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');
   }
-  return data;
-};
-// 获取选中的行记录及所有父记录
-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;
-};
-
-const edit = (selected) => {
-  topRef.value?.edit(selected);
-};
-
-const view = () => {
-  viewRef.value?.view();
-};
-
-const getElement = () => {
-  return tableRef?.value?.$el;
 };
+// =========其他API=========end
 
 defineExpose({
-  getCascadeChildren,
-  getCascadeParents,
+  // =========获取数据相关API=========
+  getRows,
   getSelectedRow,
   getSelectedRows,
   getTickedRow,
   getTickedRows,
-  getRows,
-  refresh,
-  getLocalData,
-  setLocalData,
-  updates,
-  replaceRow,
-  removeRows,
-  addRow,
+  getCascadeChildren,
+  getCascadeParents,
+  // =========获取内置组件ref对象相关API=========
   getQueryForm,
   getEditorDialog,
   getEditorForm,
   getViewerDrawer,
   getViewerPanel,
+
+  // =========表格操作相关API=========
+  setSelected,
+  setTicked,
+  clearSelected,
+  clearTicked,
+  expand,
+  collapse,
+
+  // =========本地数据模式相关API=========
+  setLocalData,
+  addLocalData,
+  updateLocalData,
+  removeLocalData,
+
+  // =========修改表格配置相关API=========
   setQueryCriteria,
   setQueryCriteriaFieldValue,
   setDataUrl,
@@ -1447,13 +1712,25 @@ defineExpose({
   setAddDataUrl,
   setEditDataUrl,
   setRemoveDataUrl,
-  stickyHeaderColumn,
-  cleanSelected,
-  cleanTicked,
-  view,
+
+  // =========内置按钮API=========
+  reset,
+  refresh,
+  add,
   edit,
-  getElement,
-  expandFun,
+  rowEdit,
+  rowsEdit,
+  clone,
+  remove,
+  view,
+  export: exportData,
+  addTop,
+  addChild,
+  resetDefaultValues,
+
+  // =========其他API=========
+  getHtmlElement,
+  refreshStyle,
 });
 
 const instance = getCurrentInstance();
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
index 0993c0f0..a8405ffa 100644
--- 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
@@ -1,4 +1,4 @@
-import { Tools, t, componentRegistryName } from '@/platform';
+import { Tools, t } from '@/platform';
 
 // 列样式处理
 const columnStyle = (item: any) => {
@@ -30,10 +30,6 @@ const childrenHandler = (item: any, gridColumns: any) => {
     });
   } else {
     columnStyle(item);
-    // 替换行编辑类型为注册名
-    if (!Tools.isEmpty(item.type)) {
-      item.type = componentRegistryName(item.type);
-    }
     const col = {
       ...{ align: 'left', label: item.name, field: item.name, name: item.name, sortable: true, hidden: false },
       ...item,
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WIcon.vue b/io.sc.platform.core.frontend/src/platform/components/icon/WIcon.vue
similarity index 59%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/WIcon.vue
rename to io.sc.platform.core.frontend/src/platform/components/icon/WIcon.vue
index ffe2be8c..dff62d94 100644
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WIcon.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/icon/WIcon.vue
@@ -1,24 +1,24 @@
 <template>
-  <div v-show="showIfComputed">
+  <div v-show="FieldMethods.getShow(props, modelValue)">
     <q-input
       ref="iconRef"
-      v-model="valueRef"
+      v-model="modelValue"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
       :dense="true"
       v-bind="attrs"
-      :rules="rulesComputed"
-      :readonly="readonlyIfComputed"
-      :disable="disableIfComputed"
-      @update:model-value="updateModelValue"
-      @change="changeValue"
+      :rules="FieldMethods.getRules(props, modelValue, iconRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
     >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
       <template #prepend>
-        <q-icon v-if="valueRef" :name="valueRef"> </q-icon>
+        <q-icon v-if="modelValue" :name="modelValue"> </q-icon>
         <w-icon-empty v-else></w-icon-empty>
       </template>
-      <template v-if="!props.form || (props.form && props.form.getStatus() !== 'view')" #append>
+      <template v-if="!props['form'] || (props['form'] && props['form'].getStatus() !== 'view')" #append>
         <q-btn icon="bi-search" size="10px" padding="2px" flat square unelevated :title="$t('select')">
           <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]" @show="show">
             <q-splitter v-model="leftWidthRef" style="width: 800px; height: 300px; position: relative">
@@ -57,7 +57,7 @@
                           class="grid justify-items-center q-pa-sm"
                           :title="item"
                           :style="
-                            item === valueRef
+                            item === modelValue
                               ? 'background-color:var(--q-negative);'
                               : searchRef && item.indexOf(searchRef) !== -1
                                 ? 'background-color:var(--q-warning);'
@@ -84,7 +84,7 @@
           square
           unelevated
           :title="$t('restore')"
-          :style="{ 'margin-left': '5px', border: '1px solid #e5e7eb', color: restoreValue, 'background-color': computedStoreBackgroundColorValue }"
+          :style="{ 'margin-left': '5px', border: '1px solid #e5e7eb', color: restoreValue }"
           @click="restoreDefaultValue"
         ></q-btn>
       </template>
@@ -92,9 +92,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, toRaw, computed, useAttrs, watch } from 'vue';
+import { ref, toRaw, computed, useAttrs, onBeforeMount } from 'vue';
 import { Tools } from '@/platform';
-import { FormValidators } from '@/platform/components';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
 import bootstrap from './icons/bootstrap.json';
 import materialIcons from './icons/material-icons.json';
 import materialSymbolsOutlined from './icons/material-symbols-outlined.json';
@@ -103,48 +104,48 @@ import fontawesomeBrands from './icons/fontawesome-v6-icons-brands.json';
 import fontawesomeRegular from './icons/fontawesome-v6-icons-regular.json';
 import fontawesomeSolid from './icons/fontawesome-v6-icons-solid.json';
 
-const attrs = useAttrs();
-const rules = attrs.rules;
 const iconRef = ref();
-const props = defineProps({
-  onChange: {
-    type: Function,
-    default: () => {},
-  },
-  modelValue: { type: String, default: '' },
-  restore: { type: Boolean, default: false },
-  showIf: {
-    type: Function,
-    default: () => {
-      return true;
-    },
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  requiredIf: {
-    type: Function,
-    default: undefined,
-  },
-  readOnlyIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  disableIf: {
-    type: Function,
-    default: () => {
-      return false;
-    },
-  },
-  form: {
-    type: Object,
-    default: undefined,
-  },
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+
+const leftWidthRef = ref(30);
+const selectedTab = ref('bootstrap');
+const isShow = ref(false);
+const searchRef = ref('');
+const defaultValue = 'bi-arrow-up-left-square';
+const restoreValue = toRaw(modelValue.value || defaultValue);
+
+interface FieldProps extends FormFieldProps {
+  restore?: boolean;
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  restore: false,
 });
-const emit = defineEmits(['update:modelValue', 'change']);
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+    isShow.value = false;
+  };
+  validate = () => {
+    return iconRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = restoreValue;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
 
 const iconSets = [
   { name: 'bootstrap', label: 'Bootstrap', prefix: 'bi-', icons: bootstrap },
@@ -156,123 +157,51 @@ const iconSets = [
   { name: 'fontawesomeSolid', label: 'fontawesome (solid)', prefix: 'fa-solid fa-', icons: fontawesomeSolid },
 ];
 
-const leftWidthRef = ref(30);
-const selectedTab = ref('bootstrap');
-const isShow = ref(false);
-const searchRef = ref('');
-const valueRef = ref(props.modelValue || 'bi-arrow-up-left-square');
-if (Tools.isEmpty(props.modelValue)) {
-  emit('update:modelValue', valueRef.value, props.form);
-}
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    valueRef.value = newVal;
-  },
-);
-const restoreValue = toRaw(props.modelValue || '');
-
-const rulesComputed = computed(() => {
-  let result = rules || <any>[];
-  if (showIfComputed.value && requiredIfComputed.value) {
-    result.push(FormValidators.required());
-  } else if (!showIfComputed.value) {
-    result = [];
-  }
-  if (iconRef?.value) {
-    iconRef.value.resetValidation();
-  }
-  return result;
-});
-
-const showIfComputed = computed(() => {
-  return props.showIf({
-    value: valueRef.value,
-    form: props.form,
-  });
-});
-const requiredIfComputed = computed(() => {
-  if (props.requiredIf) {
-    return (
-      props.requiredIf({
-        value: valueRef.value,
-        form: props.form,
-      }) || false
-    );
-  } else if (props.required) {
-    return true;
-  }
-  return false;
-});
-const readonlyIfComputed = computed(() => {
-  if (props.form && props.form.getStatus() === 'view') {
-    return true;
-  }
-  return props.readOnlyIf({
-    value: valueRef.value,
-    form: props.form,
-  });
-});
-const disableIfComputed = computed(() => {
-  return props.disableIf({
-    value: valueRef.value,
-    form: props.form,
-  });
-});
-
-if (Tools.isEmpty(valueRef.value)) {
+if (Tools.isEmpty(modelValue.value)) {
   selectedTab.value = 'bootstrap';
-} else if (valueRef.value.startsWith('bi')) {
+} else if (modelValue.value?.startsWith('bi')) {
   selectedTab.value = 'bootstrap';
-} else if (valueRef.value.startsWith('sym_o_')) {
+} else if (modelValue.value?.startsWith('sym_o_')) {
   selectedTab.value = 'materialSymbolsOutlined';
-} else if (valueRef.value.startsWith('eva')) {
+} else if (modelValue.value?.startsWith('eva')) {
   selectedTab.value = 'eva';
-} else if (valueRef.value.startsWith('fa-brands fa-')) {
+} else if (modelValue.value?.startsWith('fa-brands fa-')) {
   selectedTab.value = 'fontawesomeBrands';
-} else if (valueRef.value.startsWith('fa-regular fa-')) {
+} else if (modelValue.value?.startsWith('fa-regular fa-')) {
   selectedTab.value = 'fontawesomeRegular';
-} else if (valueRef.value.startsWith('fa-solid fa-')) {
+} else if (modelValue.value?.startsWith('fa-solid fa-')) {
   selectedTab.value = 'fontawesomeSolid';
 } else {
   selectedTab.value = 'materialIcons';
 }
 
 const iconItemClick = (icon: string) => {
-  valueRef.value = icon;
-  isShow.value = false;
-
-  updateModelValue(icon);
-  changeValue(icon);
-};
-
-const updateModelValue = (value) => {
-  valueRef.value = value;
-  emit('update:modelValue', value, props.form);
-  isShow.value = false;
-};
-const changeValue = (value) => {
-  emit('change', {
-    value: value,
-    form: props.form,
-  });
+  modelValue.value = icon;
+  fieldMethodsClass.updateValue(icon);
 };
 
 const restoreDefaultValue = () => {
-  valueRef.value = restoreValue;
-  emit('update:modelValue', restoreValue, props.form);
+  modelValue.value = restoreValue;
+  fieldMethodsClass.updateValue(restoreValue);
 };
 
 const show = () => {
-  searchRef.value = '';
-  document.getElementById(valueRef.value)?.scrollIntoView(true);
+  if (!Tools.isEmpty(modelValue.value)) {
+    searchRef.value = '';
+    document.getElementById(modelValue.value)?.scrollIntoView(true);
+  }
 };
 
-const validate = () => {
-  return iconRef.value.validate();
-};
+onBeforeMount(() => {
+  if (Tools.isEmpty(modelValue.value)) {
+    modelValue.value = defaultValue;
+  }
+});
 
 defineExpose({
-  validate,
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
 });
 </script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/bootstrap.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/bootstrap.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/bootstrap.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/bootstrap.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/eva-icons.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/eva-icons.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/eva-icons.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/eva-icons.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/fontawesome-v6-icons-brands.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/fontawesome-v6-icons-brands.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/fontawesome-v6-icons-brands.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/fontawesome-v6-icons-brands.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/fontawesome-v6-icons-regular.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/fontawesome-v6-icons-regular.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/fontawesome-v6-icons-regular.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/fontawesome-v6-icons-regular.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/fontawesome-v6-icons-solid.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/fontawesome-v6-icons-solid.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/fontawesome-v6-icons-solid.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/fontawesome-v6-icons-solid.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-icons-outlined.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/material-icons-outlined.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-icons-outlined.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/material-icons-outlined.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-icons-rounded.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/material-icons-rounded.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-icons-rounded.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/material-icons-rounded.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-icons-sharp.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/material-icons-sharp.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-icons-sharp.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/material-icons-sharp.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-icons.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/material-icons.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-icons.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/material-icons.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-symbols-outlined.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/material-symbols-outlined.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-symbols-outlined.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/material-symbols-outlined.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-symbols-rounded.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/material-symbols-rounded.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-symbols-rounded.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/material-symbols-rounded.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-symbols-sharp.json b/io.sc.platform.core.frontend/src/platform/components/icon/icons/material-symbols-sharp.json
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/form/elements/icons/material-symbols-sharp.json
rename to io.sc.platform.core.frontend/src/platform/components/icon/icons/material-symbols-sharp.json
diff --git a/io.sc.platform.core.frontend/src/platform/components/index.ts b/io.sc.platform.core.frontend/src/platform/components/index.ts
index 0a6b0963..10267fb1 100644
--- a/io.sc.platform.core.frontend/src/platform/components/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/index.ts
@@ -7,23 +7,29 @@ import WDialog from './dialog/WDialog.vue';
 import WDrawer from './drawer/WDrawer.vue';
 
 import WForm from './form/WForm.vue';
-import WCodeMirror from './form/elements/WCodeMirror.vue';
-import WColorInput from './form/elements/WColorInput.vue';
-import WColorInputPalette from './form/elements/WColorInputPalette.vue';
-import WCron from './form/elements/WCron.vue';
-import WIcon from './form/elements/WIcon.vue';
-import WPosition from './form/elements/WPosition.vue';
-import WText from './form/elements/WText.vue';
-import WNumber from './form/elements/WNumber.vue';
-import WTextarea from './form/elements/WTextarea.vue';
-import WSelect from './form/elements/WSelect.vue';
-import WTreeSelect from './form/elements/WTreeSelect.vue';
-import WDate from './form/elements/WDate.vue';
-import WCheckbox from './form/elements/WCheckbox.vue';
-import WTextBtn from './form/elements/WTextBtn.vue';
-import WPassword from './form/elements/WPassword.vue';
-import WOptionGroup from './form/elements/WOptionGroup.vue';
-import WFile from './form/elements/WFile.vue';
+import WCodeMirror from './code-mirror/WCodeMirror.vue';
+import WColorInput from './color/WColorInput.vue';
+import WColorInputPalette from './color/WColorInputPalette.vue';
+import WCron from './cron/WCron.vue';
+import WIcon from './icon/WIcon.vue';
+import WPosition from './position/WPosition.vue';
+import WText from './text/WText.vue';
+import WNumber from './number/WNumber.vue';
+import WTextarea from './textarea/WTextarea.vue';
+import WSelect from './select/WSelect.vue';
+import WInputSelect from './select/WInputSelect.vue';
+import WGridSelect from './select/WGridSelect.vue';
+import WUserSelect from './select/WUserSelect.vue';
+import WOrgSelect from './select/WOrgSelect.vue';
+import WDate from './date/WDate.vue';
+import WDateRange from './date/WDateRange.vue';
+import WCheckbox from './checkbox/WCheckbox.vue';
+import WCheckboxGroup from './checkbox/WCheckboxGroup.vue';
+import WPassword from './password/WPassword.vue';
+import WFile from './file/WFile.vue';
+import WLabel from './label/WLabel.vue';
+import WRadio from './radio/WRadio.vue';
+import WTextEditor from './text-editor/WTextEditor.vue';
 
 import WGrid from './grid/WGrid.vue';
 
@@ -74,13 +80,19 @@ export default {
     app.component('WNumber', WNumber);
     app.component('WTextarea', WTextarea);
     app.component('WSelect', WSelect);
-    app.component('WTreeSelect', WTreeSelect);
+    app.component('WInputSelect', WInputSelect);
+    app.component('WGridSelect', WGridSelect);
+    app.component('WUserSelect', WUserSelect);
+    app.component('WOrgSelect', WOrgSelect);
     app.component('WDate', WDate);
+    app.component('WDateRange', WDateRange);
     app.component('WCheckbox', WCheckbox);
-    app.component('WTextBtn', WTextBtn);
+    app.component('WCheckboxGroup', WCheckboxGroup);
     app.component('WPassword', WPassword);
-    app.component('WOptionGroup', WOptionGroup);
     app.component('WFile', WFile);
+    app.component('WLabel', WLabel);
+    app.component('WRadio', WRadio);
+    app.component('WTextEditor', WTextEditor);
 
     app.component('WGrid', WGrid);
 
@@ -128,12 +140,13 @@ export {
   WNumber,
   WTextarea,
   WSelect,
-  WTreeSelect,
+  WGridSelect,
+  WUserSelect,
+  WOrgSelect,
+  WLabel,
   WDate,
   WCheckbox,
-  WTextBtn,
   WPassword,
-  WOptionGroup,
   WFile,
   WGrid,
   WIconEmpty,
diff --git a/io.sc.platform.core.frontend/src/platform/components/label/WLabel.vue b/io.sc.platform.core.frontend/src/platform/components/label/WLabel.vue
new file mode 100644
index 00000000..3e542743
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/label/WLabel.vue
@@ -0,0 +1,7 @@
+<template><span v-if="props.required" style="color: red">*</span> {{ props.label }}</template>
+<script setup lang="ts">
+const props = defineProps({
+  required: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/number/WNumber.vue b/io.sc.platform.core.frontend/src/platform/components/number/WNumber.vue
new file mode 100644
index 00000000..c7f47ffa
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/number/WNumber.vue
@@ -0,0 +1,75 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="numberRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      type="number"
+      title=""
+      :rules="FieldMethods.getRules(props, modelValue, numberRef, [FormValidators.maxPrecision(props.precision)])"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+    </q-input>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+import { FormValidators } from '@/platform/components';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const numberRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<number>();
+
+interface FieldProps extends FormFieldProps {
+  // 继承FieldProps接口，可以将公共的props属性继承下来，defineProps尖括号的泛型只能是接口，不能为类
+  precision?: number;
+}
+const props = withDefaults(defineProps<FieldProps>(), { precision: 0, showIf: true }); // 使用withDefaults设置属性默认值
+class FieldMethods extends FormFieldMethods {
+  // 继承FieldMethods抽象类，该类中包含必须实现的抽象方法并提供了一些获取计算后的是否必填，是否显示等静态方法
+  updateValue = (value_) => {
+    const floatValue = parseFloat(value_);
+    if (!isNaN(floatValue)) {
+      modelValue.value = floatValue;
+      if (props['onUpdateValue']) {
+        props['onUpdateValue']({
+          value: floatValue,
+          form: props['form'],
+        });
+      }
+    } else {
+      modelValue.value = undefined;
+    }
+  };
+  validate = () => {
+    return numberRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+// 暴露该组件的以下方法
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/password/WPassword.vue b/io.sc.platform.core.frontend/src/platform/components/password/WPassword.vue
new file mode 100644
index 00000000..af37a778
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/password/WPassword.vue
@@ -0,0 +1,66 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="pwdRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      type="password"
+      autocomplete="off"
+      :rules="FieldMethods.getRules(props, modelValue, pwdRef, undefined)"
+      ::readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const pwdRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+
+interface FieldProps extends FormFieldProps {}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return pwdRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/position/WPosition.vue b/io.sc.platform.core.frontend/src/platform/components/position/WPosition.vue
new file mode 100644
index 00000000..060caa91
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/position/WPosition.vue
@@ -0,0 +1,141 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="positionRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="FieldMethods.getRules(props, modelValue, positionRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-if="!props['form'] || (props['form'] && props['form'].getStatus() !== 'view')" #append>
+        <!-- 选择位置按钮 -->
+        <q-btn
+          icon="bi-pin-angle"
+          size="10px"
+          padding="2px"
+          flat
+          square
+          unelevated
+          :title="$t('select')"
+          :style="{ border: '1px solid #e5e7eb', 'background-color': computedStoreBackgroundColorValue }"
+        >
+          <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]">
+            <div class="row q-col-gutter-sm q-pa-sm" style="width: 150px">
+              <div v-for="position in positionList" :key="position" class="col-4">
+                <q-btn
+                  unelevated
+                  :title="$t(position)"
+                  :color="modelValue == position ? 'primary' : ''"
+                  :style="{
+                    width: '100%',
+                    border: modelValue == position ? '' : '1px solid #dddddd',
+                  }"
+                  @click="fieldMethodsClass.updateValue(position)"
+                ></q-btn>
+              </div>
+            </div>
+          </q-popup-proxy>
+        </q-btn>
+        <!-- 恢复默认值按钮 -->
+        <q-btn
+          v-if="restore"
+          icon="bi-arrow-counterclockwise"
+          size="10px"
+          padding="2px"
+          flat
+          square
+          unelevated
+          :title="$t('restore')"
+          :style="{ 'margin-left': '5px', border: '1px solid #e5e7eb', color: restoreValue, 'background-color': computedStoreBackgroundColorValue }"
+          @click="restoreDefaultValue"
+        ></q-btn>
+      </template>
+    </q-input>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, toRaw, computed, useAttrs, onBeforeMount } from 'vue';
+import { Tools } from '@/platform';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const positionRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+
+const positionList = ['top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right'];
+const isShow = ref(false);
+const defaultValue = 'center';
+const restoreValue = toRaw(modelValue.value || defaultValue);
+
+interface FieldProps extends FormFieldProps {
+  restore?: boolean;
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  restore: false,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    isShow.value = false;
+    modelValue.value = value_;
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return positionRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = restoreValue;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+const computedStoreBackgroundColorValue = computed(() => {
+  const color: string = restoreValue;
+  if (color.toLowerCase() === 'white' || color.toLowerCase() === '#ffffff' || color.toLowerCase() === '#fff') {
+    return '#eee';
+  }
+  return undefined;
+});
+
+const restoreDefaultValue = () => {
+  modelValue.value = restoreValue;
+  if (props['onUpdateValue']) {
+    props['onUpdateValue']({
+      value: restoreValue,
+      form: props['form'],
+    });
+  }
+};
+
+onBeforeMount(() => {
+  if (Tools.isEmpty(modelValue.value)) {
+    modelValue.value = defaultValue;
+  }
+});
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/radio/WRadio.vue b/io.sc.platform.core.frontend/src/platform/components/radio/WRadio.vue
new file mode 100644
index 00000000..83fd2903
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/radio/WRadio.vue
@@ -0,0 +1,119 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)" :class="props.simple ? 'w-radio' : ''">
+    <q-field
+      ref="radioRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      v-bind="attrs"
+      :outlined="props.outlined"
+      :borderless="!props.outlined"
+      :stack-label="true"
+      :dense="true"
+      :clearable="false"
+      :rules="FieldMethods.getRules(props, modelValue, radioRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-if="!props.simple && !Tools.isEmpty(modelValue) && props.clearable" #append>
+        <q-btn flat square unelevated dense icon="cancel" @click="fieldMethodsClass.clearValue"></q-btn>
+      </template>
+      <template v-else-if="!props.simple" #control>
+        <div class="pt-[5px]">
+          <q-option-group
+            v-model="modelValue"
+            :dense="props.dense"
+            :options="props.options"
+            :inline="props.inline"
+            :readonly="FieldMethods.getReadOnly(props, modelValue)"
+            :disable="FieldMethods.getDisable(props, modelValue)"
+          />
+        </div>
+      </template>
+      <template v-else #append>
+        <q-option-group
+          v-model="modelValue"
+          :dense="props.dense"
+          :options="props.options"
+          :inline="props.inline"
+          :readonly="FieldMethods.getReadOnly(props, modelValue)"
+          :disable="FieldMethods.getDisable(props, modelValue)"
+        />
+        <q-btn v-if="!Tools.isEmpty(modelValue) && props.clearable" flat square unelevated dense icon="cancel" @click="fieldMethodsClass.clearValue"></q-btn>
+      </template>
+    </q-field>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+import { Tools } from '@/platform';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const radioRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string | boolean | number>();
+
+interface FieldProps extends FormFieldProps {
+  clearable?: boolean;
+  dense?: boolean;
+  inline?: boolean;
+  outlined?: boolean;
+  borderless?: boolean;
+  simple?: boolean; // 是否简单选项的单选按钮，默认为是，将label与选项放在同一行，选项过多时使用该模式会导致很难看
+  options: Array<() => void>;
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  clearable: true,
+  dense: true,
+  inline: true,
+  outlined: true,
+  simple: true,
+  options: () => {
+    return [];
+  },
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return radioRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
+
+<style lang="css">
+.w-radio .q-field--dense .q-field__label {
+  font-size: 18px;
+  top: 18px;
+}
+.w-radio .q-field__marginal {
+  font-size: 16px;
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WGridSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WGridSelect.vue
new file mode 100644
index 00000000..f6ce92ca
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WGridSelect.vue
@@ -0,0 +1,272 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="textSelectRef"
+      v-model="displayValueComputed"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      :autogrow="true"
+      v-bind="attrs"
+      :bottom-slots="counter"
+      type="text"
+      :rules="FieldMethods.getRules(props, { value: modelValue, displayValue: displayValueComputed }, textSelectRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, { value: modelValue, displayValue: displayValueComputed })"
+      :disable="FieldMethods.getDisable(props, { value: modelValue, displayValue: displayValueComputed })"
+      :clearable="false"
+      @update:model-value="fieldMethodsClass.updateValue"
+      @focus="
+        () => {
+          textSelectRef?.blur();
+        }
+      "
+    >
+      <!-- label -->
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+
+      <template v-if="!props['form'] || (props['form'] && props['form'].getStatus() !== 'view')" #append>
+        <q-btn v-if="!Tools.isEmpty(displayValueComputed)" flat square unelevated dense icon="cancel" @click="fieldMethodsClass.clearValue"></q-btn>
+        <q-btn flat square unelevated dense icon="manage_search">
+          <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]">
+            <div style="width: 700px; height: 300px">
+              <w-grid
+                ref="gridRef"
+                v-bind="props.grid"
+                db-click-operation="none"
+                :checkbox-selection="props.multiple || false"
+                :dense="true"
+                :config-button="false"
+                :ticked-record="{
+                  columnName: valueUseColumnName,
+                  data: typeof modelValue === 'string' ? [modelValue] : modelValue,
+                }"
+                @row-click="rowClick"
+                @update-ticked="updateTicked"
+                @update-tickeds="updateTickeds"
+              >
+              </w-grid>
+            </div>
+          </q-popup-proxy>
+        </q-btn>
+      </template>
+      <template v-if="counter" #counter>
+        <div>{{ modelValue?.length }}</div>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useAttrs, onBeforeMount, toRaw } from 'vue';
+import { Tools, axios } from '@/platform';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const textSelectRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string | Array<string>>();
+const modelObjectValue = ref(<any>[]); // 模型值包含实际值与显示值的对象集合。
+const gridRef = ref();
+
+const isShow = ref(false);
+
+interface FieldProps extends FormFieldProps {
+  multiple?: boolean;
+  counter?: boolean;
+  displayValue: string | ((args: object) => '');
+  grid: object; // 表格配置项
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  multiple: false, // 是否允许多选，多选模式下模型绑定值必须为数组
+  counter: false, // 显示右下角计数器
+  /**
+   * 显示值配置，必须传入，可使用配置：
+   * 列名：填写列名
+   * 自定义函数：自己定义显示的内容，组件会将用户数据传到函数中，函数必须返回一个字符串，示例：
+   * displayValue: (args) => {
+   *   return args['data']['name'] + '_' + args['data']['code'];
+   * }
+   */
+  displayValue: '',
+});
+class FieldMethods extends FormFieldMethods {
+  // 组件值改变事件调用的方法
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        displayValue: displayValueComputed.value,
+        form: props['form'],
+      });
+    }
+  };
+  // 组件验证方法
+  validate = () => {
+    return textSelectRef.value.validate();
+  };
+
+  // 组件设置值
+  setValue = (value) => {
+    if (props.multiple && Array.isArray(value) && Array.isArray(modelValue.value)) {
+      fieldMethodsClass.clearValue();
+      modelValue.value.push(...value);
+      setObjectValueByValue(value);
+    } else if (!props.multiple && !Array.isArray(value)) {
+      modelValue.value = value;
+      setObjectValueByValue(value);
+    } else {
+      console.info('error========模型值不匹配');
+    }
+  };
+  // 获取组件值
+  getValue = () => {
+    return modelValue.value;
+  };
+  // 获取组件包含实际与显示值的对象
+  getObjectValue = () => {
+    return modelObjectValue.value;
+  };
+  // 组件清空值
+  clearValue = () => {
+    if (props.multiple && Array.isArray(modelValue.value)) {
+      modelValue.value.splice(0, modelValue.value.length);
+    } else {
+      modelValue.value = undefined;
+    }
+    fieldMethodsClass.clearObjectValue();
+  };
+  // 清空显示值
+  clearObjectValue = () => {
+    modelObjectValue.value.splice(0, modelObjectValue.value.length);
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+const valueUseColumnName = props.grid['primaryKey'] || 'id';
+
+const displayValueComputed = computed(() => {
+  let result = '';
+  if (modelObjectValue.value.length > 0) {
+    modelObjectValue.value.forEach((item) => {
+      result = result + ',' + item['displayValue'];
+    });
+    result = result.substring(1, result.length);
+  }
+  return result;
+});
+
+// 获取最终显示在页面上的显示值
+const getActualDisplayValue = (row) => {
+  if (!Tools.isEmpty(props.displayValue) && typeof props.displayValue === 'function') {
+    return props.displayValue({
+      data: toRaw(row),
+      grid: gridRef.value,
+    });
+  } else if (!Tools.isEmpty(props.displayValue) && typeof props.displayValue === 'string') {
+    return row[props.displayValue];
+  }
+  return '';
+};
+
+// 修改列头checkbox的状态事件
+const updateTickeds = (args) => {
+  fieldMethodsClass.clearValue();
+  if (args.value && Array.isArray(modelValue.value)) {
+    const rows = gridRef.value.getRows();
+    rows.forEach((item) => {
+      modelValue.value.push(item[valueUseColumnName]);
+      modelObjectValue.value.push({ value: item[valueUseColumnName], displayValue: getActualDisplayValue(item) });
+    });
+  }
+};
+// 修改行数据checkbox的状态事件
+const updateTicked = (args) => {
+  if (Array.isArray(modelValue.value)) {
+    if (props.grid['tree']) {
+      fieldMethodsClass.clearValue();
+
+      const rows = gridRef.value.getTickedRows();
+      if (rows?.length > 0) {
+        rows.forEach((item) => {
+          modelValue.value.push(item[valueUseColumnName]);
+          modelObjectValue.value.push({ value: item[valueUseColumnName], displayValue: getActualDisplayValue(item) });
+        });
+      }
+    } else {
+      const index = modelValue.value.findIndex((item) => {
+        return item === args.row[valueUseColumnName];
+      });
+      if (args.row['ticked']) {
+        if (index < 0) {
+          modelValue.value.push(args.row[valueUseColumnName]);
+          modelObjectValue.value.push({ value: args.row[valueUseColumnName], displayValue: getActualDisplayValue(args.row) });
+        }
+      } else {
+        modelValue.value.splice(index, 1);
+        modelObjectValue.value.splice(index, 1);
+      }
+    }
+  }
+};
+const rowClick = (args) => {
+  const modelValue_ = args.row[valueUseColumnName];
+  if (props.multiple && Array.isArray(modelValue.value)) {
+    fieldMethodsClass.clearValue();
+    modelValue.value.push(modelValue_);
+    modelObjectValue.value.push({ value: modelValue_, displayValue: getActualDisplayValue(args.row) });
+  } else if (!props.multiple) {
+    fieldMethodsClass.clearValue();
+    modelValue.value = modelValue_;
+    modelObjectValue.value.push({ value: modelValue_, displayValue: getActualDisplayValue(args.row) });
+  } else {
+    console.info('error========模型值不匹配');
+  }
+  isShow.value = false;
+};
+
+// 根据实际值设置显示值
+const setObjectValueByValue = async (value) => {
+  if ((Array.isArray(value) && value.length > 0) || (typeof value === 'string' && !Tools.isEmpty(value))) {
+    const urlSearchParams = new URLSearchParams();
+    urlSearchParams.append(
+      'criteria',
+      JSON.stringify({
+        fieldName: valueUseColumnName,
+        operator: 'inSet',
+        value: Array.isArray(value) ? value : [value],
+      }),
+    );
+    const resp = await axios.get(props.grid['fetchDataUrl'] || props.grid['dataUrl'], { params: urlSearchParams }).catch((error) => {
+      console.info('error-------------', error);
+    });
+    if (resp && resp.data) {
+      const responseData = resp.data;
+      if (Array.isArray(responseData) && responseData.length > 0) {
+        fieldMethodsClass.clearObjectValue();
+        responseData.forEach((item) => {
+          modelObjectValue.value.push({ value: item[valueUseColumnName], displayValue: getActualDisplayValue(item) });
+        });
+      } else if (typeof responseData === 'object' && responseData.content?.length > 0) {
+        fieldMethodsClass.clearObjectValue();
+        responseData.content.forEach((item) => {
+          modelObjectValue.value.push({ value: item[valueUseColumnName], displayValue: getActualDisplayValue(item) });
+        });
+      }
+    }
+  }
+};
+
+onBeforeMount(() => {
+  // 组件挂载完成后如果存在值，需要根据值查询后台数据，并设置显示值
+  setObjectValueByValue(modelValue.value);
+});
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  getObjectValue: fieldMethodsClass.getObjectValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WInputSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WInputSelect.vue
new file mode 100644
index 00000000..b1a905dc
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WInputSelect.vue
@@ -0,0 +1,153 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="textSelectRef"
+      v-model="modelDisplayValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      :autogrow="true"
+      v-bind="attrs"
+      :bottom-slots="counter"
+      type="text"
+      :rules="FieldMethods.getRules(props, { value: modelValue, displayValue: modelDisplayValue }, textSelectRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, { value: modelValue, displayValue: modelDisplayValue })"
+      :disable="FieldMethods.getDisable(props, { value: modelValue, displayValue: modelDisplayValue })"
+      :clearable="false"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-if="!props['form'] || (props['form'] && props['form'].getStatus() !== 'view')" #append>
+        <q-btn v-if="!Tools.isEmpty(modelValue)" flat square unelevated dense icon="cancel" @click="fieldMethodsClass.clearValue"></q-btn>
+        <q-btn flat square unelevated dense :icon="isShow ? 'arrow_drop_up' : 'arrow_drop_down'" @click="() => (isShow = !isShow)">
+          <q-menu anchor="bottom start" self="top left" :offset="[50, 0]">
+            <q-list style="min-width: 100px">
+              <template v-for="(option, index) in options" :key="index">
+                <q-item v-close-popup clickable>
+                  <q-item-section @click="sectionClick(option)">{{ typeof option === 'object' ? option['label'] : option }}</q-item-section>
+                </q-item>
+              </template>
+            </q-list>
+          </q-menu>
+        </q-btn>
+      </template>
+      <template v-if="counter" #counter>
+        <div>{{ modelValue?.length }}</div>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Tools } from '@/platform';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { onBeforeMount, ref, useAttrs, watch } from 'vue';
+import { FormFieldMethods } from '../form/FormField';
+
+const textSelectRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+const modelDisplayValue = ref(''); // 模型显示值
+
+const isShow = ref(false);
+
+interface FieldProps extends FormFieldProps {
+  counter?: boolean;
+  options: Array<string> | Array<object>;
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  counter: false, // 显示右下角计数器
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        displayValue: modelDisplayValue.value,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return textSelectRef.value.validate();
+  };
+
+  setValue = (value) => {
+    modelValue.value = value;
+    setDiaplayValueByValue(value);
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  getDisplayValue = () => {
+    return modelDisplayValue.value;
+  };
+  // 组件清空值
+  clearValue = () => {
+    modelValue.value = undefined;
+    modelDisplayValue.value = '';
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+const findOption = (value, field = 'label') => {
+  return props.options.find((option) => {
+    if (typeof option === 'object') {
+      return option[field] === value;
+    } else {
+      return option === value;
+    }
+  });
+};
+watch(
+  () => modelDisplayValue.value,
+  (newVal, oldVal) => {
+    const option = findOption(newVal);
+    if (newVal && Tools.isEmpty(option)) {
+      modelValue.value = newVal;
+    } else if (newVal && !Tools.isEmpty(option)) {
+      modelValue.value = typeof option === 'object' ? option['value'] : option;
+    } else if (!newVal) {
+      modelValue.value = undefined;
+    }
+  },
+);
+const sectionClick = (option) => {
+  if (typeof option === 'object') {
+    modelValue.value = option['value'];
+    modelDisplayValue.value = option['label'];
+  } else {
+    modelValue.value = option;
+    modelDisplayValue.value = option;
+  }
+};
+// 根据实际值设置显示值
+const setDiaplayValueByValue = async (value) => {
+  if (!Tools.isEmpty(value)) {
+    const option = findOption(value, 'value');
+    if (!Tools.isEmpty(option)) {
+      if (typeof option === 'object') {
+        modelDisplayValue.value = option['label'];
+      } else {
+        modelDisplayValue.value = value;
+      }
+    } else {
+      modelDisplayValue.value = value;
+    }
+  }
+};
+
+onBeforeMount(() => {
+  setDiaplayValueByValue(modelValue.value);
+});
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  getDisplayValue: fieldMethodsClass.getDisplayValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WOrgSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WOrgSelect.vue
new file mode 100644
index 00000000..40280b9f
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WOrgSelect.vue
@@ -0,0 +1,259 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="textSelectRef"
+      v-model="displayValueComputed"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      :autogrow="true"
+      v-bind="attrs"
+      :bottom-slots="counter"
+      type="text"
+      :rules="FieldMethods.getRules(props, { value: modelValue, displayValue: displayValueComputed }, textSelectRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, { value: modelValue, displayValue: displayValueComputed })"
+      :disable="FieldMethods.getDisable(props, { value: modelValue, displayValue: displayValueComputed })"
+      :clearable="false"
+      @update:model-value="fieldMethodsClass.updateValue"
+      @focus="
+        () => {
+          textSelectRef?.blur();
+        }
+      "
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-if="!props['form'] || (props['form'] && props['form'].getStatus() !== 'view')" #append>
+        <q-btn v-if="!Tools.isEmpty(displayValueComputed)" flat square unelevated dense icon="cancel" @click="fieldMethodsClass.clearValue"></q-btn>
+        <q-btn flat square unelevated dense icon="saved_search">
+          <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]">
+            <div style="width: 700px; height: 300px">
+              <w-grid
+                ref="orgGridRef"
+                title="机构列表"
+                :checkbox-selection="props.multiple || false"
+                :dense="true"
+                :tree="true"
+                :fetch-data-url="orgGridFetchDataUrl"
+                :config-button="false"
+                :toolbar-actions="['expand']"
+                :columns="[
+                  { name: 'name', label: $t('name'), sortable: false },
+                  { name: 'code', label: $t('code'), width: 100, sortable: false },
+                  { name: 'enable', label: $t('status'), format: Formater.enableTag(), width: 80, sortable: false },
+                  { name: 'isDepartment', label: '是否部门', format: Formater.yesNo(), width: 80, sortable: false },
+                ]"
+                :ticked-record="{
+                  columnName: valueUseColumnName,
+                  data: typeof modelValue === 'string' ? [modelValue] : modelValue,
+                }"
+                db-click-operation="none"
+                @row-click="rowClick"
+                @update-ticked="updateTicked"
+              >
+              </w-grid>
+            </div>
+          </q-popup-proxy>
+        </q-btn>
+      </template>
+      <template v-if="counter" #counter>
+        <div>{{ modelValue?.length }}</div>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useAttrs, onBeforeMount, toRaw } from 'vue';
+import { Tools, axios, Environment, Formater } from '@/platform';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const textSelectRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string | Array<string>>();
+const modelObjectValue = ref(<any>[]); // 模型值包含实际值与显示值的对象集合。
+const orgGridRef = ref();
+
+const orgGridFetchDataUrl = Environment.apiContextPath('/api/system/org');
+const isShow = ref(false);
+
+interface FieldProps extends FormFieldProps {
+  multiple?: boolean;
+  counter?: boolean;
+  valueUseId?: boolean;
+  displayValue?: string | ((args: object) => '');
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  multiple: false, // 是否允许多选，多选模式下模型绑定值必须为数组
+  counter: false, // 显示右下角计数器
+  /**
+   * 值使用机构id绑定，false则使用code
+   */
+  valueUseId: true,
+  /**
+   * 显示值配置，可使用选项：
+   * code：机构编码
+   * name：机构名称，组件默认使用该选项
+   * nameAppendCode：机构名追加编码，示例：上海分行(000025)，
+   * codeAppendName：编码追加机构名，示例：000025(上海分行)
+   * 自定义函数：自己定义显示的内容，组件会将用户数据传到函数中，函数必须返回一个字符串，示例：
+   * displayValue: (args) => {
+   *   return args['data']['name'] + '_' + args['data']['code'];
+   * }
+   */
+  displayValue: 'name',
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        displayValue: displayValueComputed.value,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return textSelectRef.value.validate();
+  };
+
+  setValue = (value) => {
+    if (props.multiple && Array.isArray(value) && Array.isArray(modelValue.value)) {
+      fieldMethodsClass.clearValue();
+      modelValue.value.push(...value);
+      setObjectValueByValue(value);
+    } else if (!props.multiple && !Array.isArray(value)) {
+      modelValue.value = value;
+      setObjectValueByValue(value);
+    } else {
+      console.info('error========模型值不匹配');
+    }
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  getObjectValue = () => {
+    return modelObjectValue.value;
+  };
+  // 组件清空值
+  clearValue = () => {
+    if (props.multiple && Array.isArray(modelValue.value)) {
+      modelValue.value.splice(0, modelValue.value.length);
+    } else {
+      modelValue.value = undefined;
+    }
+    fieldMethodsClass.clearObjectValue();
+  };
+  // 清空显示值
+  clearObjectValue = () => {
+    modelObjectValue.value.splice(0, modelObjectValue.value.length);
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+const valueUseColumnName = props.valueUseId ? 'id' : 'code';
+
+const displayValueComputed = computed(() => {
+  let result = '';
+  if (modelObjectValue.value.length > 0) {
+    modelObjectValue.value.forEach((item) => {
+      result = result + ',' + item['displayValue'];
+    });
+    result = result.substring(1, result.length);
+  }
+  return result;
+});
+
+const getActualDisplayValue = (row) => {
+  if (!Tools.isEmpty(props.displayValue) && typeof props.displayValue === 'function') {
+    return props.displayValue({
+      data: toRaw(row),
+      grid: orgGridRef.value,
+    });
+  } else if (!Tools.isEmpty(props.displayValue) && typeof props.displayValue === 'string') {
+    if (props.displayValue === 'code') {
+      return row['code'];
+    } else if (props.displayValue === 'name') {
+      return row['name'];
+    } else if (props.displayValue === 'codeAppendName') {
+      return row['code'] + '(' + row['name'] + ')';
+    } else if (props.displayValue === 'nameAppendCode') {
+      return row['name'] + '(' + row['code'] + ')';
+    }
+  }
+  return '';
+};
+
+const updateTicked = (args) => {
+  if (Array.isArray(modelValue.value)) {
+    fieldMethodsClass.clearValue();
+    const rows = orgGridRef.value.getTickedRows();
+    if (rows?.length > 0) {
+      rows.forEach((item) => {
+        modelValue.value.push(item[valueUseColumnName]);
+        modelObjectValue.value.push({ value: item[valueUseColumnName], displayValue: getActualDisplayValue(item) });
+      });
+    }
+  }
+};
+const rowClick = (args) => {
+  const modelValue_ = args.row[valueUseColumnName];
+  if (props.multiple && Array.isArray(modelValue.value)) {
+    fieldMethodsClass.clearValue();
+    modelValue.value.push(modelValue_);
+    modelObjectValue.value.push({ value: modelValue_, displayValue: getActualDisplayValue(args.row) });
+  } else if (!props.multiple) {
+    fieldMethodsClass.clearValue();
+    modelValue.value = modelValue_;
+    modelObjectValue.value.push({ value: modelValue_, displayValue: getActualDisplayValue(args.row) });
+  } else {
+    console.info('error========模型值不匹配');
+  }
+  isShow.value = false;
+};
+
+// 根据实际值设置显示值
+const setObjectValueByValue = async (value) => {
+  if ((Array.isArray(value) && value.length > 0) || (typeof value === 'string' && !Tools.isEmpty(value))) {
+    const urlSearchParams = new URLSearchParams();
+    urlSearchParams.append(
+      'criteria',
+      JSON.stringify({
+        fieldName: valueUseColumnName,
+        operator: 'inSet',
+        value: Array.isArray(value) ? value : [value],
+      }),
+    );
+    const resp = await axios.get(orgGridFetchDataUrl, { params: urlSearchParams }).catch((error) => {
+      console.info('error-------------', error);
+    });
+    if (resp && resp.data) {
+      const responseData = resp.data;
+      if (Array.isArray(responseData) && responseData.length > 0) {
+        fieldMethodsClass.clearObjectValue();
+        responseData.forEach((item) => {
+          modelObjectValue.value.push({ value: item[valueUseColumnName], displayValue: getActualDisplayValue(item) });
+        });
+      } else if (typeof responseData === 'object' && responseData.content?.length > 0) {
+        fieldMethodsClass.clearObjectValue();
+        responseData.content.forEach((item) => {
+          modelObjectValue.value.push({ value: item[valueUseColumnName], displayValue: getActualDisplayValue(item) });
+        });
+      }
+    }
+  }
+};
+
+onBeforeMount(() => {
+  setObjectValueByValue(modelValue.value);
+});
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  getObjectValue: fieldMethodsClass.getObjectValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WSelect.vue
new file mode 100644
index 00000000..ba6f8192
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WSelect.vue
@@ -0,0 +1,66 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-select
+      ref="selectRef"
+      v-model="modelValue"
+      emit-value
+      map-options
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="FieldMethods.getRules(props, modelValue, selectRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+    </q-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const selectRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string | number | boolean | Array<string> | Array<number> | Array<boolean>>();
+
+interface FieldProps extends FormFieldProps {}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return selectRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WUserSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WUserSelect.vue
new file mode 100644
index 00000000..b8832727
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WUserSelect.vue
@@ -0,0 +1,304 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="textSelectRef"
+      v-model="displayValueComputed"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      :autogrow="true"
+      v-bind="attrs"
+      :bottom-slots="counter"
+      type="text"
+      :rules="FieldMethods.getRules(props, { value: modelValue, displayValue: displayValueComputed }, textSelectRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, { value: modelValue, displayValue: displayValueComputed })"
+      :disable="FieldMethods.getDisable(props, { value: modelValue, displayValue: displayValueComputed })"
+      :clearable="false"
+      @update:model-value="fieldMethodsClass.updateValue"
+      @focus="
+        () => {
+          textSelectRef?.blur();
+        }
+      "
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-if="!props['form'] || (props['form'] && props['form'].getStatus() !== 'view')" #append>
+        <q-btn v-if="!Tools.isEmpty(displayValueComputed)" flat square unelevated dense icon="cancel" @click="fieldMethodsClass.clearValue"></q-btn>
+        <q-btn flat square unelevated dense icon="person_search">
+          <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]">
+            <q-splitter v-model="leftWidthRef" style="width: 800px; height: 300px; position: relative">
+              <template #before>
+                <w-grid
+                  ref="orgGridRef"
+                  :dense="true"
+                  :tree="true"
+                  :fetch-data-url="Environment.apiContextPath('/api/system/org')"
+                  :config-button="false"
+                  :checkbox-selection="false"
+                  db-click-operation="expand"
+                  :columns="[{ name: 'name', label: $t('org') }]"
+                  @row-click="orgRowClick"
+                >
+                </w-grid>
+              </template>
+              <template #after>
+                <w-grid
+                  ref="userGridRef"
+                  :checkbox-selection="props.multiple || false"
+                  :dense="true"
+                  :fetch-data-url="userGridFetchDataUrl"
+                  :config-button="false"
+                  title="用户列表"
+                  :sort-by="['loginName']"
+                  :query-form-cols-num="2"
+                  :query-form-fields="[
+                    { name: 'loginName', label: $t('loginName'), type: 'w-text' },
+                    { name: 'userName', label: $t('userName'), type: 'w-text' },
+                  ]"
+                  :toolbar-actions="['query', 'separator', 'reset']"
+                  :ticked-record="{
+                    columnName: valueUseColumnName,
+                    data: typeof modelValue === 'string' ? [modelValue] : modelValue,
+                  }"
+                  :columns="[
+                    { name: 'loginName', label: $t('loginName') },
+                    { name: 'userName', label: $t('userName') },
+                    { name: 'description', label: $t('description') },
+                    { name: 'enable', label: $t('status'), format: Formater.enableTag() },
+                  ]"
+                  @row-click="userRowClick"
+                  @update-ticked="updateTicked"
+                  @update-tickeds="updateTickeds"
+                >
+                </w-grid>
+              </template>
+            </q-splitter>
+          </q-popup-proxy>
+        </q-btn>
+      </template>
+      <template v-if="counter" #counter>
+        <div>{{ modelValue?.length }}</div>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useAttrs, onBeforeMount, toRaw } from 'vue';
+import { Tools, axios, Environment, Formater } from '@/platform';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const textSelectRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string | Array<string>>();
+const modelObjectValue = ref(<any>[]); // 模型值包含实际值与显示值的对象集合。
+const orgGridRef = ref();
+const userGridRef = ref();
+
+const userGridFetchDataUrl = Environment.apiContextPath('/api/system/user');
+const userGridFetchDataByOrgUrl = Environment.apiContextPath('/api/system/user/queryUsersByOrgAndQueryParameter');
+const leftWidthRef = ref(30);
+const isShow = ref(false);
+
+interface FieldProps extends FormFieldProps {
+  multiple?: boolean;
+  counter?: boolean;
+  valueUseId?: boolean;
+  displayValue?: string | ((args: object) => '');
+}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+  multiple: false, // 是否允许多选，多选模式下模型绑定值必须为数组
+  counter: false, // 显示右下角计数器
+  /**
+   * 值使用用户id，默认绑定的实际值为用户登录账号，true则使用id绑定
+   */
+  valueUseId: false,
+  /**
+   * 显示值配置，可使用选项：
+   * account：用户登陆账号
+   * name：用户名
+   * nameAppendAccount：用户名追加登陆账号，示例：张三(zhangsan)，组件默认使用该选项
+   * accountAppendName：账号追加用户名，示例：zhangsan(张三)
+   * 自定义函数：自己定义显示的内容，组件会将用户数据传到函数中，函数必须返回一个字符串，示例：
+   * displayValue: (args) => {
+   *   return args['data']['loginName'] + '_' + args['data']['userName'];
+   * }
+   */
+  displayValue: 'nameAppendAccount',
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        displayValue: displayValueComputed.value,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return textSelectRef.value.validate();
+  };
+
+  setValue = (value) => {
+    if (props.multiple && Array.isArray(value) && Array.isArray(modelValue.value)) {
+      fieldMethodsClass.clearValue();
+      modelValue.value.push(...value);
+      setObjectValueByValue(value);
+    } else if (!props.multiple && !Array.isArray(value)) {
+      modelValue.value = value;
+      setObjectValueByValue(value);
+    } else {
+      console.info('error========模型值不匹配');
+    }
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  getObjectValue = () => {
+    return modelObjectValue.value;
+  };
+  // 组件清空值
+  clearValue = () => {
+    if (props.multiple && Array.isArray(modelValue.value)) {
+      modelValue.value.splice(0, modelValue.value.length);
+    } else {
+      modelValue.value = undefined;
+    }
+    fieldMethodsClass.clearObjectValue();
+  };
+  // 清空显示值
+  clearObjectValue = () => {
+    modelObjectValue.value.splice(0, modelObjectValue.value.length);
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+const valueUseColumnName = props.valueUseId ? 'id' : 'loginName';
+
+const displayValueComputed = computed(() => {
+  let result = '';
+  if (modelObjectValue.value.length > 0) {
+    modelObjectValue.value.forEach((item) => {
+      result = result + ',' + item['displayValue'];
+    });
+    result = result.substring(1, result.length);
+  }
+  return result;
+});
+
+const getActualDisplayValue = (row) => {
+  if (!Tools.isEmpty(props.displayValue) && typeof props.displayValue === 'function') {
+    return props.displayValue({
+      data: toRaw(row),
+      orgGrid: orgGridRef.value,
+      userGrid: userGridRef.value,
+    });
+  } else if (!Tools.isEmpty(props.displayValue) && typeof props.displayValue === 'string') {
+    if (props.displayValue === 'account') {
+      return row['loginName'];
+    } else if (props.displayValue === 'name') {
+      return row['userName'];
+    } else if (props.displayValue === 'accountAppendName') {
+      return row['loginName'] + '(' + row['userName'] + ')';
+    } else if (props.displayValue === 'nameAppendAccount') {
+      return row['userName'] + '(' + row['loginName'] + ')';
+    }
+  }
+  return '';
+};
+
+const updateTickeds = (args) => {
+  if (args.value && Array.isArray(modelValue.value)) {
+    fieldMethodsClass.clearValue();
+    const rows = userGridRef.value.getRows();
+    rows.forEach((item) => {
+      modelValue.value.push(item[valueUseColumnName]);
+      modelObjectValue.value.push({ value: item[valueUseColumnName], displayValue: getActualDisplayValue(item) });
+    });
+  } else {
+    fieldMethodsClass.clearValue();
+  }
+};
+const updateTicked = (args) => {
+  if (Array.isArray(modelValue.value)) {
+    const index = modelValue.value.findIndex((item) => {
+      return item === args.row[valueUseColumnName];
+    });
+    if (args.row['ticked']) {
+      if (index < 0) {
+        modelValue.value.push(args.row[valueUseColumnName]);
+        modelObjectValue.value.push({ value: args.row[valueUseColumnName], displayValue: getActualDisplayValue(args.row) });
+      }
+    } else {
+      modelValue.value.splice(index, 1);
+      modelObjectValue.value.splice(index, 1);
+    }
+  }
+};
+const userRowClick = (args) => {
+  const modelValue_ = args.row[valueUseColumnName];
+  if (props.multiple && Array.isArray(modelValue.value)) {
+    fieldMethodsClass.clearValue();
+    modelValue.value.push(modelValue_);
+    modelObjectValue.value.push({ value: modelValue_, displayValue: getActualDisplayValue(args.row) });
+  } else if (!props.multiple) {
+    fieldMethodsClass.clearValue();
+    modelValue.value = modelValue_;
+    modelObjectValue.value.push({ value: modelValue_, displayValue: getActualDisplayValue(args.row) });
+  } else {
+    console.info('error========模型值不匹配');
+  }
+  isShow.value = false;
+};
+const orgRowClick = (args) => {
+  userGridRef.value.setFetchDataUrl(userGridFetchDataByOrgUrl + '?orgId=' + args.row['id']);
+  userGridRef.value.refresh();
+};
+
+// 根据实际值设置显示值
+const setObjectValueByValue = async (value) => {
+  if ((Array.isArray(value) && value.length > 0) || (typeof value === 'string' && !Tools.isEmpty(value))) {
+    const urlSearchParams = new URLSearchParams();
+    urlSearchParams.append(
+      'criteria',
+      JSON.stringify({
+        fieldName: valueUseColumnName,
+        operator: 'inSet',
+        value: Array.isArray(value) ? value : [value],
+      }),
+    );
+    const resp = await axios.get(userGridFetchDataUrl, { params: urlSearchParams }).catch((error) => {
+      console.info('error-------------', error);
+    });
+    if (resp && resp.data) {
+      const responseData = resp.data;
+      if (Array.isArray(responseData) && responseData.length > 0) {
+        fieldMethodsClass.clearObjectValue();
+        responseData.forEach((item) => {
+          modelObjectValue.value.push({ value: item[valueUseColumnName], displayValue: getActualDisplayValue(item) });
+        });
+      } else if (typeof responseData === 'object' && responseData.content?.length > 0) {
+        fieldMethodsClass.clearObjectValue();
+        responseData.content.forEach((item) => {
+          modelObjectValue.value.push({ value: item[valueUseColumnName], displayValue: getActualDisplayValue(item) });
+        });
+      }
+    }
+  }
+};
+
+onBeforeMount(() => {
+  setObjectValueByValue(modelValue.value);
+});
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  getObjectValue: fieldMethodsClass.getObjectValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/text-editor/WTextEditor.vue b/io.sc.platform.core.frontend/src/platform/components/text-editor/WTextEditor.vue
new file mode 100644
index 00000000..59027680
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/text-editor/WTextEditor.vue
@@ -0,0 +1,85 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-editor
+      ref="textEditorRef"
+      v-model="modelValue"
+      :dense="true"
+      :toolbar="[
+        ['label'],
+        ['removeFormat', 'viewsource'],
+        [
+          {
+            label: $q.lang.editor.align,
+            icon: $q.iconSet.editor.align,
+            fixedLabel: true,
+            options: ['left', 'center', 'right', 'justify'],
+          },
+        ],
+        ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript', 'hr'],
+        [
+          {
+            label: $q.lang.editor.fontSize,
+            icon: $q.iconSet.editor.fontSize,
+            fixedLabel: true,
+            fixedIcon: true,
+            list: 'no-icons',
+            options: ['size-1', 'size-2', 'size-3', 'size-4', 'size-5', 'size-6', 'size-7'],
+          },
+        ],
+        ['print', 'fullscreen'],
+      ]"
+      v-bind="attrs"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label>
+        <span>{{ attrs.label }}</span>
+      </template>
+    </q-editor>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const textRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel({ type: String, default: '' });
+
+interface FieldProps extends FormFieldProps {}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return textRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = '';
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/text/WText.vue b/io.sc.platform.core.frontend/src/platform/components/text/WText.vue
new file mode 100644
index 00000000..3ba71b4e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/text/WText.vue
@@ -0,0 +1,80 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="textRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      type="text"
+      :rules="FieldMethods.getRules(props, modelValue, textRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+    </q-input>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs, computed } from 'vue';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const textRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+
+interface FieldProps extends FormFieldProps {}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return textRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+// const showComputed = computed(() => {
+//   return FieldMethods.getShow(props, modelValue.value);
+// });
+// const rulesComputed = computed(() => {
+//   return FieldMethods.getRules(props, modelValue.value, textRef, undefined);
+// });
+// const readOnlyComputed = computed(() => {
+//   return FieldMethods.getReadOnly(props, modelValue.value);
+// });
+// const disableComputed = computed(() => {
+//   return FieldMethods.getDisable(props, modelValue.value);
+// });
+// const requiredComputed = computed(() => {
+//   return FieldMethods.getRequired(props, modelValue.value);
+// });
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/textarea/WTextarea.vue b/io.sc.platform.core.frontend/src/platform/components/textarea/WTextarea.vue
new file mode 100644
index 00000000..92ca227b
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/textarea/WTextarea.vue
@@ -0,0 +1,65 @@
+<template>
+  <div v-show="FieldMethods.getShow(props, modelValue)">
+    <q-input
+      ref="textareaRef"
+      v-model="modelValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      type="textarea"
+      :rules="FieldMethods.getRules(props, modelValue, textareaRef, undefined)"
+      :readonly="FieldMethods.getReadOnly(props, modelValue)"
+      :disable="FieldMethods.getDisable(props, modelValue)"
+      @update:model-value="fieldMethodsClass.updateValue"
+    >
+      <template #label><w-label :required="FieldMethods.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { FormFieldMethods } from '../form/FormField';
+
+const textareaRef = ref();
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+
+interface FieldProps extends FormFieldProps {}
+const props = withDefaults(defineProps<FieldProps>(), {
+  showIf: true,
+});
+class FieldMethods extends FormFieldMethods {
+  updateValue = (value_) => {
+    if (props['onUpdateValue']) {
+      props['onUpdateValue']({
+        value: value_,
+        form: props['form'],
+      });
+    }
+  };
+  validate = () => {
+    return textareaRef.value.validate();
+  };
+  setValue = (value_) => {
+    modelValue.value = value_;
+  };
+  getValue = () => {
+    return modelValue.value;
+  };
+  clearValue = () => {
+    modelValue.value = undefined;
+  };
+}
+const fieldMethodsClass = new FieldMethods();
+
+defineExpose({
+  validate: fieldMethodsClass.validate,
+  setValue: fieldMethodsClass.setValue,
+  getValue: fieldMethodsClass.getValue,
+  clearValue: fieldMethodsClass.clearValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/index.ts b/io.sc.platform.core.frontend/src/platform/index.ts
index c3d28fc4..29f80853 100644
--- a/io.sc.platform.core.frontend/src/platform/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/index.ts
@@ -135,12 +135,13 @@ export {
   WNumber,
   WTextarea,
   WSelect,
-  WTreeSelect,
+  WGridSelect,
+  WOrgSelect,
+  WUserSelect,
+  WLabel,
   WDate,
   WCheckbox,
-  WTextBtn,
   WPassword,
-  WOptionGroup,
   WGrid,
   WIconEmpty,
   WVExpandDiv,
diff --git a/io.sc.platform.core.frontend/src/routes/routes.json b/io.sc.platform.core.frontend/src/routes/routes.json
index 0bd0ec1c..29deba26 100644
--- a/io.sc.platform.core.frontend/src/routes/routes.json
+++ b/io.sc.platform.core.frontend/src/routes/routes.json
@@ -20,7 +20,7 @@
     "priority": 0,
     "component": "component.testcase.noMenuRoute",
     "componentPath": "@/views/testcase/route/NoMenuRoute.vue",
-    "redirect": null,  
+    "redirect": null,
     "meta": {
       "permissions": ["/testcase/route/**/*"]
     }
@@ -38,20 +38,6 @@
       "permissions": ["/testcase/math/**/*"]
     }
   },
-
-  {
-    "name": "route.testcase.mathEditorForm",
-    "path": "testcase/mathEditorForm",
-    "parent": "/",
-    "priority": 0,
-    "component": "component.testcase.mathEditorForm",
-    "componentPath": "@/views/testcase/math/MathEditorForm.vue",
-    "redirect": null,
-    "meta": {
-      "permissions": ["/testcase/math/**/*"]
-    }
-  },
-
   {
     "name": "route.testcase.form",
     "path": "testcase/form",
diff --git a/io.sc.platform.core.frontend/src/views/Editor.vue b/io.sc.platform.core.frontend/src/views/Editor.vue
index b8924ecc..0c658433 100644
--- a/io.sc.platform.core.frontend/src/views/Editor.vue
+++ b/io.sc.platform.core.frontend/src/views/Editor.vue
@@ -2,52 +2,52 @@
   <div ref="containerRef"></div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { type CellStyle, Graph, InternalEvent } from '@maxgraph/core';
+// import { ref, onMounted } from 'vue';
+// import { type CellStyle, Graph, InternalEvent } from '@maxgraph/core';
 
-const containerRef = ref();
+// const containerRef = ref();
 
-onMounted(() => {
-  //const container = <HTMLElement>document.getElementById('graph-container');
-  // Disables the built-in context menu
-  InternalEvent.disableContextMenu(containerRef.value);
+// onMounted(() => {
+//   //const container = <HTMLElement>document.getElementById('graph-container');
+//   // Disables the built-in context menu
+//   InternalEvent.disableContextMenu(containerRef.value);
 
-  const graph = new Graph(containerRef.value);
-  graph.setPanning(true); // Use mouse right button for panning
-  // Gets the default parent for inserting new cells. This
-  // is normally the first child of the root (ie. layer 0).
-  const parent = graph.getDefaultParent();
+//   const graph = new Graph(containerRef.value);
+//   graph.setPanning(true); // Use mouse right button for panning
+//   // Gets the default parent for inserting new cells. This
+//   // is normally the first child of the root (ie. layer 0).
+//   const parent = graph.getDefaultParent();
 
-  // Adds cells to the model in a single step
-  graph.batchUpdate(() => {
-    const vertex01 = graph.insertVertex({
-      parent,
-      position: [10, 10],
-      size: [100, 100],
-      value: 'rectangle',
-    });
-    const vertex02 = graph.insertVertex({
-      parent,
-      position: [350, 90],
-      size: [50, 50],
-      style: {
-        fillColor: 'orange',
-        shape: 'ellipse',
-        verticalAlign: 'top',
-        verticalLabelPosition: 'bottom',
-      },
-      value: 'ellipse',
-    });
-    graph.insertEdge({
-      parent,
-      source: vertex01,
-      target: vertex02,
-      value: 'edge',
-      style: {
-        edgeStyle: 'orthogonalEdgeStyle',
-        rounded: true,
-      },
-    });
-  });
-});
+//   // Adds cells to the model in a single step
+//   graph.batchUpdate(() => {
+//     const vertex01 = graph.insertVertex({
+//       parent,
+//       position: [10, 10],
+//       size: [100, 100],
+//       value: 'rectangle',
+//     });
+//     const vertex02 = graph.insertVertex({
+//       parent,
+//       position: [350, 90],
+//       size: [50, 50],
+//       style: {
+//         fillColor: 'orange',
+//         shape: 'ellipse',
+//         verticalAlign: 'top',
+//         verticalLabelPosition: 'bottom',
+//       },
+//       value: 'ellipse',
+//     });
+//     graph.insertEdge({
+//       parent,
+//       source: vertex01,
+//       target: vertex02,
+//       value: 'edge',
+//       style: {
+//         edgeStyle: 'orthogonalEdgeStyle',
+//         rounded: true,
+//       },
+//     });
+//   });
+// });
 </script>
diff --git a/io.sc.platform.core.frontend/src/views/likm/Form.vue b/io.sc.platform.core.frontend/src/views/likm/Form.vue
index 46d80793..ef22f76a 100644
--- a/io.sc.platform.core.frontend/src/views/likm/Form.vue
+++ b/io.sc.platform.core.frontend/src/views/likm/Form.vue
@@ -1,169 +1,232 @@
 <template>
   <div>
-    <w-form ref="formRef" :fields="aaaa.fields" :cols-x-gap="8"> </w-form>
+    <w-form
+      ref="formRef"
+      :fields="[
+        {
+          name: 'test1',
+          label: '文本框',
+          type: 'w-text',
+          requiredIf: true,
+        },
+        {
+          name: 'test2',
+          label: '下拉框',
+          type: 'w-select',
+          requiredIf: true,
+          multiple: true,
+          options: [
+            { label: '男', value: 1 },
+            { label: '女', value: 0 },
+          ],
+          onUpdateValue: (args) => {
+            console.info('value========', args);
+          },
+        },
+        {
+          name: 'test2.5',
+          label: '可输入可选择下拉框',
+          type: 'w-input-select',
+          requiredIf: true,
+          defaultValue: 'wowowo',
+          options: [
+            { label: 'java', value: '1' },
+            { label: 'python', value: '2' },
+          ],
+        },
+        {
+          name: 'test3',
+          label: '复选框',
+          type: 'w-checkbox',
+          onUpdateValue: (args) => {
+            console.info('value========', args);
+          },
+        },
+        {
+          name: 'test4',
+          label: '日期',
+          type: 'w-date',
+          clearable: true,
+          requiredIf: true,
+        },
+        {
+          name: 'test4.5',
+          label: '日期范围',
+          type: 'w-date-range',
+          clearable: true,
+          requiredIf: true,
+        },
+        {
+          name: 'test5',
+          label: '文件',
+          type: 'w-file',
+          requiredIf: true,
+        },
+        {
+          name: 'test6',
+          label: '数字',
+          type: 'w-number',
+          precision: 2,
+          requiredIf: (args) => {
+            return true;
+          },
+          onUpdateValue: (args) => {
+            // console.info('value========', args);
+          },
+        },
+        {
+          name: 'test7',
+          label: '密码',
+          type: 'w-password',
+          requiredIf: true,
+        },
+        {
+          name: 'test8',
+          label: '头像',
+          type: 'w-icon',
+          requiredIf: true,
+        },
+        {
+          name: 'test9',
+          label: '页面位置',
+          type: 'w-position',
+          requiredIf: true,
+        },
+        {
+          name: 'test10',
+          label: '颜色',
+          type: 'w-color-input',
+          requiredIf: true,
+        },
+        {
+          name: 'test11',
+          label: '颜色2',
+          type: 'w-color-input-palette',
+          requiredIf: true,
+        },
+        {
+          name: 'test12',
+          label: '复选框组',
+          requiredIf: true,
+          type: 'w-checkbox-group',
+          simple: false,
+          options: [
+            { label: '唱歌', value: '1' },
+            { label: '跳舞', value: '2' },
+            { label: '运动', value: '3' },
+            { label: '看书', value: '4' },
+          ],
+        },
+        {
+          name: 'test12.5',
+          label: '单选按钮',
+          type: 'w-radio',
+          requiredIf: true,
+          options: [
+            { label: '已婚', value: 1 },
+            { label: '单身', value: 2 },
+            { label: '离异', value: 3 },
+          ],
+        },
+        {
+          name: 'test13',
+          label: '自定义下拉表格',
+          type: 'w-grid-select',
+          requiredIf: true,
+          multiple: true,
+          displayValue: 'name',
+          grid: {
+            title: '应用列表',
+            dataUrl: Environment.apiContextPath('/api/system/application'),
+            sortBy: ['order'],
+            queryFormColsNum: 3,
+            queryFormFields: [
+              { name: 'code', label: $t('code') },
+              { name: 'name', label: $t('name') },
+              { name: 'enable', label: $t('isEnable') },
+            ],
+            toolbarActions: ['query', 'separator', 'reset'],
+            columns: [
+              { name: 'order', label: $t('order') },
+              { name: 'code', label: $t('code') },
+              {
+                name: 'name',
+                label: $t('name'),
+                format: (val, row) => {
+                  return val;
+                },
+              },
+              { name: 'enable', label: $t('status'), format: Formater.enableTag() },
+              { name: 'lastModifier', label: $t('lastModifier') },
+              { name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() },
+            ],
+          },
+        },
+        {
+          name: 'test14',
+          label: '用户选择',
+          type: 'w-user-select',
+          multiple: true,
+          requiredIf: true,
+        },
+        {
+          name: 'test15',
+          label: '机构选择',
+          type: 'w-org-select',
+          requiredIf: true,
+        },
+        {
+          name: 'test16',
+          label: 'cron表达式',
+          type: 'w-cron',
+          requiredIf: true,
+        },
+        {
+          name: 'test98',
+          label: '代码编辑器',
+          type: 'w-code-mirror',
+          requiredIf: true,
+          colsFirst: true,
+          colSpan: '2',
+          rows: 3,
+        },
+        {
+          name: 'test99',
+          label: '文本域',
+          type: 'w-textarea',
+          requiredIf: true,
+          colSpan: '2',
+          rows: 7,
+        },
+        {
+          name: 'test100',
+          label: '富文本编辑器',
+          type: 'w-text-editor',
+          required: true,
+          colsFirst: true,
+          colSpan: 'full',
+        },
+      ]"
+      :cols-x-gap="8"
+    >
+    </w-form>
     <q-btn label="提交" @click="submit"></q-btn>&nbsp; <q-btn label="重置" @click="reset"></q-btn>&nbsp;
     <q-btn label="初始化值" @click="setValue"></q-btn>&nbsp;
   </div>
 </template>
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
-import { EnumTools, Options } from '@/platform';
+import { EnumTools, Options, Environment, Formater } from '@/platform';
 import { FormValidators } from '@/platform/components';
 import { useI18n } from 'vue-i18n';
 
-const UrlOpenTypeEnum = await EnumTools.fetch('io.sc.platform.system.enums.UrlOpenType');
 const { t } = useI18n();
 const formRef = ref();
-const aaaa = {
-  fields: [
-    {
-      label: t('theme.main'),
-      name: 'name',
-      type: 'password',
-      // maxlength: 10,
-      requiredIf: (form) => {
-        console.info('form====', form.getData().age);
-        return false;
-      },
-      rules: [
-        () => {
-          return true;
-        },
-      ],
-      colspan: 2,
-      // requiredIf: () => false,
-      // 'onUpdate:modelValue': (value) => {
-      //   formRef.value.data.ah = '111';
-      // },
-      onFocus: () => {
-        // console.info('33333333');
-      },
-    },
-    // {
-    //   label: '机构',
-    //   name: 'org',
-    //   type: 'w-text-btn',
-    //   requiredIf: () => true,
-    //   // buttonPosition: 'prepend',
-    //   button: {
-    //     icon: 'home',
-    //     click: () => {
-    //       console.info('点击！！');
-    //     },
-    //   },
-    // },
-    {
-      name: 'urlOpenType',
-      label: 'urlOpenType',
-      type: 'select',
-      options: Options.enum(UrlOpenTypeEnum, false),
-      defaultValue: 'NEW_WINDOW',
-    },
-    {
-      label: '年龄',
-      name: 'age',
-      type: 'w-number',
-      defaultValue: 111,
-      precision: 0,
-      requiredIf: () => true,
-    },
-    {
-      label: '出生日期',
-      name: 'cs',
-      type: 'w-date',
-      requiredIf: () => true,
-    },
-    {
-      label: '爱好',
-      name: 'ah',
-      type: 'w-text',
-      rules: [],
-      reactiveRules: true,
-      requiredIf: () => true,
-    },
-    {
-      label: '性别',
-      name: 'sex',
-      type: 'select',
-      defaultValue: '0',
-      options: ['1', '0'],
-      requiredIf: () => true,
-      'onUpdate:modelValue': (value) => {
-        // if (value === 1) {
-        //   formRef.value.fields.addr.label = '地址2222';
-        // } else {
-        //   formRef.value.fields.addr.label = '地址3333';
-        // }
-      },
-    },
-    {
-      label: '地址',
-      name: 'addr',
-      rows: 2,
-      colspan: 'full',
-      type: 'w-textarea',
-      // hideIf: () => {
-      //   if (formRef.value) {
-      //     if (formRef.value.data.sex && formRef.value.data.sex === 1) {
-      //       return true;
-      //     } else {
-      //       return false;
-      //     }
-      //   }
-      //   return false;
-      // },
-      requiredIf: () => true,
-      // readonlyIf: () => {
-      //   return true;
-      // },
-      disableIf: () => {
-        return false;
-      },
-    },
-    {
-      label: '是否可用1',
-      name: 'ky1',
-      colsFirst: true,
-      colspan: 2,
-      type: 'w-checkbox',
-      // showIf: (form) => {
-      //   if (form.getFieldValue('sex') === '1') {
-      //     return true;
-      //   } else {
-      //     return false;
-      //   }
-      // },
-      // disableIf: () => {
-      //   return true;
-      // },
-    },
-    {
-      label: '是否可用2',
-      name: 'ky2',
-      type: 'w-checkbox',
-    },
-    {
-      label: '是否可用3',
-      name: 'ky3',
-      type: 'w-checkbox',
-    },
-  ],
-};
 
 const submit = async () => {
-  // aaaa.fields[1].required = false;
-  // const validateResult = await formRef.value.validate();
-  // console.info('表单验证结果：', validateResult);
-  const errors = [
-    { fieldName: 'name', errorMessage: '个数必须在1和4之间' },
-    { fieldName: 'name', errorMessage: '不能包含@符号' },
-    { fieldName: 'age', errorMessage: '年龄不能为负数' },
-  ];
-  formRef.value.setValidationErrors(errors);
-  // console.info('数据：', formRef.value.getData());
-  // formRef.value.fieldsMap.get('name').required = false;
-  // console.info('xxx===', formRef.value.fieldsMap.get('ah'));
-  // const validateResult = await formRef.value.validate();
+  console.info('表单数据：', formRef.value.getData());
+  const validateResult = await formRef.value.validate();
+  console.info('表单验证结果：', validateResult);
 };
 const reset = () => {
   formRef.value.reset();
diff --git a/io.sc.platform.core.frontend/src/views/likm/Grid.vue b/io.sc.platform.core.frontend/src/views/likm/Grid.vue
index 2ad76783..60d7a7f7 100644
--- a/io.sc.platform.core.frontend/src/views/likm/Grid.vue
+++ b/io.sc.platform.core.frontend/src/views/likm/Grid.vue
@@ -1,570 +1,31 @@
 <template>
-  <div style="height: 100%">
-    <!-- <q-splitter v-model="splitterModel">
-      <template #before>
-        <q-tabs v-model="tab" vertical class="text-teal">
-          <q-tab name="mails" icon="mail" label="Mails" />
-          <q-tab name="alarms" icon="alarm" label="Alarms" />
-          <q-tab name="movies" icon="movie" label="Movies" />
-        </q-tabs>
-      </template>
-
-      <template #after>
-        <q-tab-panels v-model="tab" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up">
-          <q-tab-panel name="mails">
-            
-          </q-tab-panel>
-
-          <q-tab-panel name="alarms">
-            <w-grid
-              ref="grid2"
-              :title="testGrid.title"
-              draggable
-              dense
-              :data-url="testGrid.tableDataUrl"
-              :checkbox-selection="true"
-              selection="multiple"
-              :query-form-cols-num="2"
-              :columns="testGrid.tableColumns"
-              :toolbar-actions="testGrid.toolbar"
-              :query-form-fields="testGrid.queryForm"
-              :editor="{
-                form: {
-                  colsNum: 1,
-                  fields: [
-                    { label: '登录名', name: 'loginName', type: 'w-text' },
-                    { label: '用户名', name: 'userName', type: 'w-text' },
-                    { label: '密码', name: 'password', type: 'w-text' },
-                    { label: '是否可用1111', name: 'enable', type: 'w-checkbox' },
-                    {
-                      name: 'urlOpenType',
-                      label: 'urlOpenType',
-                      type: 'select',
-                      options: Options.enum(UrlOpenTypeEnum, false),
-                      defaultValue: 'NEW_WINDOW',
-                    },
-                  ],
-                },
-              }"
-              :viewer="testGrid.view"
-            ></w-grid>
-          </q-tab-panel>
-
-          <q-tab-panel name="movies">
-            <div class="text-h4 q-mb-md">Movies</div>
-            <w-form ref="form" :fields="[{ name: 'a', label: 'a', type: 'text' }]"></w-form>
-          </q-tab-panel>
-        </q-tab-panels>
-      </template>
-    </q-splitter> -->
-    <!-- <w-grid
-      ref="gridRef"
-      :title="testGrid.title"
-      draggable
-      :dense="state.dense"
-      :hide-bottom="false"
-      :data-url="testGrid.tableDataUrl"
-      :auto-fetch-data="true"
-      :checkbox-selection="true"
-      selection="multiple"
-      :query-form-cols-num="6"
-      :columns="testGrid.tableColumns"
-      :toolbar-actions="testGrid.toolbar"
-      :query-form-fields="testGrid.queryForm"
-      :editor="{
-        form: {
-          colsNum: 1,
-          fields: [
-            { label: '登录名', name: 'loginName', type: 'w-text' },
-            { label: '用户名', name: 'userName', type: 'w-text' },
-            { label: '密码', name: 'password', type: 'w-text' },
-            { label: '是否可用1111', name: 'enable', type: 'w-checkbox' },
-            {
-              name: 'urlOpenType',
-              label: 'urlOpenType',
-              type: 'select',
-              options: Options.enum(UrlOpenTypeEnum, false),
-              defaultValue: 'NEW_WINDOW',
-            },
-          ],
-        },
-      }"
-      :viewer="testGrid.view"
-      @update-ticked="updateTicked"
-      @row-click="rowClick"
-      @row-db-click="rowDbClick"
-      @after-request-data="
-        () => {
-        }
-      "
-    ></w-grid> -->
+  <div class="h-full">
     <w-grid
-      ref="applicationGridRef"
-      :title="$t('system.application.grid.title')"
-      :config-button="true"
-      selection="multiple"
-      :checkbox-selection="true"
-      :sort-no="true"
-      :draggable="true"
+      ref="gridRef"
+      title="示例列表"
       :data-url="Environment.apiContextPath('/api/system/application')"
-      :sort-by="['order']"
-      :query-form-cols-num="3"
-      db-click-operation="rowEdit"
-      :query-form-fields="[
-        { name: 'code', label: $t('code'), type: 'text' },
-        { name: 'name', label: $t('name'), type: 'text' },
-        { name: 'enable', label: $t('isEnable'), type: 'select', options: Options.yesNo() },
-      ]"
-      :toolbar-configure="{ noIcon: false }"
-      :toolbar-actions="[
-        'query',
-        'refresh',
-        'separator',
-        'rowEdit',
-        'rowsEdit',
-        'separator',
-        'add',
-        'clone',
-        'edit',
-        'remove',
-        'separator',
-        'view',
-        'separator',
-        'export',
-      ]"
+      :toolbar-actions="['add', 'edit']"
       :columns="[
-        { name: 'order', label: $t('order'), type: 'number', attrs: { required: true } },
-        { name: 'code', label: $t('code'), type: 'text', attrs: { required: true } },
+        { name: 'code', label: '编码', type: 'w-text' },
+        { name: 'name', label: '名称', type: 'w-text' },
         {
-          name: 'name',
-          label: $t('name'),
-          type: 'text',
-          format: (val, row) => {
-            return val;
-          },
+          name: 'enable',
+          label: '状态',
+          format: Formater.enableTag(),
         },
-        { width: 80, name: 'enable', label: $t('status'), format: Formater.enableTag(), type: 'checkbox' },
-        { width: 120, name: 'lastModifier', label: $t('lastModifier') },
-        { width: 120, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() },
+        { name: 'lastModifier', label: '最后修改人', align: 'center' },
+        { name: 'lastModifyDate', label: '最后修改日期', align: 'center' },
       ]"
-      :editor="{
-        dialog: {
-          width: '600px',
-          height: '300px',
-        },
-        form: {
-          colsNum: 1,
-          fields: [
-            { name: 'code', label: $t('code'), type: 'text', required: true },
-            { name: 'name', label: $t('name'), type: 'text', required: true },
-            { name: 'description', label: $t('description'), type: 'textarea', rows: 1 },
-            { name: 'order', label: $t('order'), type: 'number' },
-            { name: 'enable', label: $t('enable'), type: 'checkbox', defaultValue: true },
-          ],
-        },
-      }"
-      :viewer="{
-        panel: {
-          columnNum: 1,
-          fields: [
-            { name: 'id', label: $t('id') },
-            { name: 'code', label: $t('code') },
-            { name: 'name', label: $t('name') },
-            { name: 'description', label: $t('description') },
-            { name: 'enable', label: $t('enable'), format: Formater.none() },
-            { name: 'order', label: $t('order') },
-            { name: 'dataComeFrom', label: $t('dataComeFrom') },
-            { name: 'creator', label: $t('creator') },
-            { name: 'createDate', label: $t('createDate') },
-            { name: 'lastModifier', label: $t('lastModifier') },
-            { name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() },
-            { name: 'corporationCode', label: $t('corporationCode') },
-          ],
-        },
-      }"
-      @row-click="
-        (evt, row, index) => {
-          // console.info('rowclick');
-        }
-      "
-      @before-request-data="() => {}"
-      @after-row-draggable="
-        (grid, updateDatas) => {
-          // console.info('grid=====', grid);
-          // console.info('updateDatas======', updateDatas);
-        }
-      "
-      @after-editor-open="
-        () => {
-          console.info('打开窗口');
-        }
-      "
+      @row-click="rowClick"
     >
     </w-grid>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, reactive, computed } from 'vue';
-import { axios, Environment, EnumTools, Options, Formater } from '@/platform';
-import EnableIcon from '@/platform/components/grid/EnableIcon.vue';
-import { IconEnum } from '@/platform/enums';
+import { ref } from 'vue';
+import { Environment, Formater } from '@/platform';
 
-// :query-criteria="{
-//         operator: 'equals',
-//         fieldName: 'code',
-//         value: 'A',
-//       }"
-
-const dialogRef = ref();
 const gridRef = ref();
-const grid2 = ref();
-const form = ref();
-const tab = ref('mails');
-const splitterModel = ref(10);
-const UrlOpenTypeEnum = await EnumTools.fetch('io.sc.platform.system.enums.UrlOpenType');
-const updateTicked = (event, row) => {
-  console.info('grid.updateTicked.event====', event);
-  console.info('grid.updateTicked.row====', row);
-};
-const state = reactive({
-  dense: false,
-});
-
-const startY = ref(0);
-const endY = ref(0);
-
-const rowClick = (evt, row, index) => {
-  // if (startY.value === 0) {
-  //   startY.value = evt.clientY;
-  // } else if (evt.shiftKey && endY.value === 0) {
-  //   endY.value = evt.clientY;
-  // }
-  // console.info('startY====', startY.value);
-  // console.info('endY====', endY.value);
-  // // 添加到选择中，同时清空 startY 与 endY
-  // if (startY.value > 0 && endY.value > 0) {
-  //   console.info('添加到选择中，同时清空 startY 与 endY');
-  //   startY.value = 0;
-  //   endY.value = 0;
-  // }
-  // startY.value = 0;
-  // endY.value = 0;
-  // console.info('grid.rowClick.row====', row);
-
-  // tab.value = 'alarms';
-  // nextTick(() => {
-  //   grid2.value.getQueryForm().setFieldValue('loginName', row.id);
-  // });
-
-  // tab.value = 'movies';
-  // nextTick(() => {
-  //   form.value.setFieldValue('a', row.id);
-  // });
-  console.info('grid.rowClick.row====', row);
-};
-const rowDbClick = (evt, row, index) => {
-  console.info('grid.rowDbClick.row====', row);
-};
-
-// 获取元素的绝对位置坐标（像对于浏览器视区左上角）
-const getElementViewPosition = (element) => {
-  //计算x坐标
-  let actualLeft = element.offsetLeft;
-  let xcurrent = element.offsetParent;
-  while (xcurrent !== null) {
-    actualLeft += xcurrent.offsetLeft + xcurrent.clientLeft;
-    xcurrent = xcurrent.offsetParent;
-  }
-  let elementScrollLeft = document.documentElement.scrollLeft;
-  if (document.compatMode == 'BackCompat') {
-    elementScrollLeft = document.body.scrollLeft;
-  }
-  const left = actualLeft - elementScrollLeft;
-
-  //计算y坐标
-  let actualTop = element.offsetTop;
-  let ycurrent = element.offsetParent;
-  while (ycurrent !== null) {
-    actualTop += ycurrent.offsetTop + ycurrent.clientTop;
-    ycurrent = ycurrent.offsetParent;
-  }
-  let elementScrollTop = document.documentElement.scrollTop;
-  if (document.compatMode == 'BackCompat') {
-    elementScrollTop = document.body.scrollTop;
-  }
-  var right = actualTop - elementScrollTop;
-  //返回结果
-  return { x: left, y: right };
-};
-
-// const gridHeightComputed = computed(() => {
-//   // if (dialogRef?.value && gridRef?.value) {
-//   //   const height = dialogRef.value.getContentHeight();
-//   //   const tableContentY = getElementViewPosition(gridRef.value.$el.getElementsByClassName('q-table__middle')[0]);
-//   //   console.info('height==========', height);
-//   //   console.info('gridRef==============', tableContentY);
-//   //   if (height && tableContentY) {
-//   //     return height.height - (tableContentY.y - height.y);
-//   //   }
-//   // }
-//   if (dialogRef?.value && dialogRef.value.getContent()) {
-//     const height = dialogRef.value.getContent().clientHeight;
-//     console.info('dialogRef.value.getContent()====', height);
-//     if (height > 0) {
-//       return height;
-//     }
-//   }
-//   return 0;
-// });
-const aaaaaaaaaaaaaaaa = ref(false);
-const testGrid = {
-  hideBottom: false,
-  autoLoadData: false,
-  tableLeftColumnStickyNumber: 1,
-  title: '用户列表',
-  tableDataUrl: Environment.apiContextPath('api/system/user'),
-  queryCriteria: {
-    fieldName: 'loginName',
-    operator: 'contains',
-    value: '1',
-  },
-  toolbar: [
-    ['query', 'separator', 'moreQuery'],
-    'reset',
-    {
-      extend: 'refresh',
-      click: () => {
-        state.dense = !state.dense;
-      },
-    },
-    'separator',
-    {
-      extend: 'resetDefaultValues',
-      icon: undefined,
-      label: 'aasdfFFF',
-      loadingIf: (selected, ticked, grid) => {
-        if (selected.length === 0) {
-          return true;
-        }
-        return false;
-      },
-      // enableIf: (selected) => {
-      //   if (selected && selected.length > 0) {
-      //     return true;
-      //   }
-      //   return false;
-      // },
-      // beforeClick: (selected, context, grid) => {
-      //   console.info('先执行before');
-      //   context.aaa = '111';
-      // },
-      click: (args) => {
-        // grid.setQueryCriteria({
-        //   fieldName: 'loginName',
-        //   operator: 'contains',
-        //   value: 'admin',
-        // });
-        console.info('args=====', args);
-        args._click();
-      },
-      afterClick: (selected, context, grid) => {
-        // grid.addEditFormRef.setFieldValue('userName', '李四');
-      },
-    },
-    [
-      {
-        name: 'op',
-        icon: 'difference',
-        label: '操作',
-      },
-      'add',
-      'edit',
-      'clone',
-      'remove',
-      'separator',
-      'view',
-      'export',
-    ],
-    'separator',
-  ],
-  tableShowSortNo: true,
-  queryForm: [
-    { label: '登录名', name: 'loginName', type: 'w-text' },
-    { label: '用户名', name: 'userName', type: 'w-text' },
-    { label: '描述', name: 'description', type: 'w-text' },
-    { label: '用户名', name: 'userName1', type: 'w-text' },
-    { label: '描述', name: 'description1', type: 'w-text' },
-    {
-      label: '是否可用',
-      name: 'enable',
-      type: 'select',
-      options: [{ label: '监管报表-G4B-1表内信用风险加权资产计算表(权重法)', value: '0a981b42-d0df-4f02-94c4-edc20620ba9f' }],
-    },
-    // { label: '邮箱地址', name: 'email', type: 'w-text' },
-    // { label: '电话', name: 'phone', type: 'w-text' },
-    // { label: '手机号', name: 'mobile', type: 'w-number' },
-    // { label: '最后修改人', name: 'lastModifier', type: 'w-text' },
-    // { label: '最后修改时间', name: 'lastModifyDate', type: 'w-date' },
-  ],
-  tableColumns: [
-    // {
-    //   name: 'info',
-    //   label: '用户信息',
-    //   columns: [
-    //     { name: 'loginName', label: '登录名', align: 'right' },
-    //     { name: 'userName', label: '用户名' },
-    //   ],
-    // },
-    { name: 'loginName', label: '登录名', align: 'right' },
-    { name: 'userName', label: '用户名' },
-    // {
-    //   name: 'lxxx',
-    //   label: '联系方式',
-    //   columns: [
-    //     {
-    //       name: 'email',
-    //       label: '邮箱地址',
-    //       columns: [
-    //         { width: 100, name: 'auc', label: 'auc' },
-    //         { width: 100, name: 'ar', label: 'ar' },
-    //         { width: 100, name: 'ks', label: 'ks' },
-    //       ],
-    //     },
-    //     {
-    //       name: 'tx',
-    //       label: '通讯',
-    //       columns: [
-    //         { name: 'phone', label: '电话' },
-    //         { name: 'mobile', label: '手机号' },
-    //       ],
-    //     },
-    //     {
-    //       name: 'qq',
-    //       label: 'QQ',
-    //       // columns: [
-    //       //   { width: 100, name: 'aucQualitative', label: 'aucQualitative' },
-    //       //   { width: 100, name: 'arQualitative', label: 'arQualitative' },
-    //       //   { width: 100, name: 'ksQualitative', label: 'ksQualitative' },
-    //       // ],
-    //     },
-    //   ],
-    // },
-    { name: 'email', label: '邮箱地址' },
-    { name: 'phone', label: '电话' },
-    { name: 'mobile', label: '手机号' },
-    { name: 'qq', label: 'QQ' },
-    { name: 'description', label: '描述', width: 400 },
-    {
-      name: 'enable',
-      label: '是否可用',
-      align: 'center',
-      width: 400,
-      format: (val, row) => {
-        return {
-          componentType: 'q-checkbox',
-          bindModelValue: true,
-          attrs: {
-            dense: true,
-          },
-        };
-        // return {
-        //   componentType: 'q-icon',
-        //   attrs: {
-        //     name: val ? IconEnum.是状态 : IconEnum.否状态,
-        //     color: val ? 'green' : 'red',
-        //     size: 'xs',
-        //   },
-        // };
-      },
-    },
-    // { name: 'loginName', label: '登录名', align: 'right' },
-    // { name: 'userName', label: '用户名' },
-    { name: 'lastModifier', label: '最后修改人' },
-    { name: 'lastModifyDate', label: '最后修改时间' },
-  ],
-  addEdit: {
-    dialog: {},
-    form: {
-      colsNum: 1,
-      fields: [
-        { label: '登录名', name: 'loginName', type: 'w-text' },
-        { label: '用户名', name: 'userName', type: 'w-text' },
-        { label: '密码', name: 'password', type: 'w-text' },
-        { label: '是否可用1111', name: 'enable', type: 'w-checkbox' },
-        {
-          name: 'urlOpenType',
-          label: 'urlOpenType',
-          type: 'select',
-          options: Options.enum(UrlOpenTypeEnum, false),
-          defaultValue: 'NEW_WINDOW',
-        },
-      ],
-    },
-  },
-  view: {
-    panel: {
-      columnNum: 2,
-      fields: [
-        { name: 'id', label: '主键' },
-        { name: 'loginName', label: '登录名' },
-        { name: 'userName', label: '用户名' },
-        { name: 'description', label: '描述' },
-        {
-          name: 'enable',
-          label: '是否可用',
-        },
-        { name: 'email', label: '邮箱地址' },
-        { name: 'phone', label: '电话' },
-        { name: 'mobile', label: '手机号' },
-        { name: 'lastModifier', label: '最后修改人' },
-        { name: 'lastModifyDate', label: '最后修改时间' },
-      ],
-    },
-  },
-};
-
-onMounted(() => {
-  // gridRef.value.setLocalData([
-  //   {
-  //     loginName: 'admin1',
-  //   },
-  //   {
-  //     loginName: 'admin2',
-  //   },
-  //   {
-  //     loginName: 'admin3',
-  //   },
-  //   {
-  //     loginName: 'admin4',
-  //   },
-  //   {
-  //     loginName: 'admin5',
-  //   },
-  //   {
-  //     loginName: 'admin6',
-  //   },
-  //   {
-  //     loginName: 'admin7',
-  //   },
-  //   {
-  //     loginName: 'admin8',
-  //   },
-  //   {
-  //     loginName: 'admin9',
-  //   },
-  //   {
-  //     loginName: 'admin10',
-  //   },
-  //   {
-  //     loginName: 'admin11',
-  //   },
-  //   {
-  //     loginName: 'admin12',
-  //   },
-  //   {
-  //     loginName: 'admin13',
-  //   },
-  // ]);
-});
+const rowClick = () => {};
 </script>
diff --git a/io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue b/io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue
index 51263db6..55028bad 100644
--- a/io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue
+++ b/io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue
@@ -2,26 +2,41 @@
   <div class="h-full">
     <w-grid
       ref="gridRef"
-      :title="testGrid.title"
-      draggable
-      sort-no
-      tree
-      :tree-icon="(row) => {}"
-      :checkbox-selection="true"
-      db-click-operation="rowEdit"
-      :data-url="testGrid.dataUrl"
-      :fetch-data-url="testGrid.fetchDataUrl"
-      :columns="testGrid.tableColumns"
-      :toolbar-actions="testGrid.toolbar"
-      :query-form-fields="testGrid.queryFormFields"
-      :query-form-cols-num="3"
-      @update-ticked="updateTicked"
-      @after-row-draggable="
-        (grid, updateDatas) => {
-          console.info('grid=====', grid);
-          console.info('updateDatas======', updateDatas);
-        }
-      "
+      title="树形表格示例"
+      :fetch-data-url="Environment.apiContextPath('api/system/menu/allMenus')"
+      :tree="true"
+      db-click-operation="expand"
+      draggable="local"
+      :columns="[
+        {
+          name: 'name',
+          label: '菜单名称',
+          type: 'text',
+          format: (val, row) => {
+            return t(row.name);
+          },
+        },
+        {
+          name: 'icon',
+          label: '图标',
+          type: 'icon',
+          attrs: {
+            required: true,
+          },
+          format: (val, row) => {
+            return {
+              componentType: 'q-icon',
+              attrs: {
+                name: val,
+                size: 'xs',
+              },
+            };
+          },
+        },
+        { name: 'type', label: '菜单类型' },
+        { name: 'order', label: '排序号' },
+      ]"
+      :toolbar-actions="['expand']"
     ></w-grid>
   </div>
 </template>
@@ -82,11 +97,11 @@ const testGrid = {
     ],
     'separator',
   ],
-  queryFormFields: [
-    { label: '菜单名称', name: 'name', type: 'w-password' },
-    { label: '菜单类型', name: 'userName', type: 'select' },
-    { label: '是否可用', name: 'enable', type: 'select' },
-  ],
+  // queryFormFields: [
+  //   { label: '菜单名称', name: 'name', type: 'w-password' },
+  //   { label: '菜单类型', name: 'userName', type: 'select' },
+  //   { label: '是否可用', name: 'enable', type: 'select' },
+  // ],
   tableColumns: [
     {
       name: 'name',
diff --git a/io.sc.platform.core.frontend/template-project/src/mock/api/sample/params.json b/io.sc.platform.core.frontend/template-project/src/mock/api/sample/params.json
new file mode 100644
index 00000000..0706c330
--- /dev/null
+++ b/io.sc.platform.core.frontend/template-project/src/mock/api/sample/params.json
@@ -0,0 +1,232 @@
+{
+  "enable": true,
+  "url": "/api/rwa/params/isc/fetchParams?pageable=false&sortBy=sortNo",
+  "method": "get",
+  "response": {
+    "code" : 200,
+    "messageI18nKey" : "success",
+    "message" : "success",
+    "data" : [ {
+      "jpaVersion" : null,
+      "dataComeFrom" : "INPUT",
+      "creator" : "admin",
+      "createDate" : "2023-09-05 02:02:14",
+      "lastModifier" : "admin",
+      "lastModifyDate" : "2023-09-05 02:02:14",
+      "corporationCode" : null,
+      "id" : "2268c3e2-c03f-4d8a-8bcd-e37d24cf955e",
+      "name" : "银行参数",
+      "parent" : null,
+      "children" : [ ],
+      "icon" : "folder",
+      "isFolder" : true,
+      "sortNo" : null,
+      "isDefault" : false,
+      "pageType" : null,
+      "templateId" : null,
+      "routeName" : null,
+      "routeQuery" : null
+    }, {
+      "jpaVersion" : null,
+      "dataComeFrom" : "INPUT",
+      "creator" : "admin",
+      "createDate" : "2023-08-30 08:00:00",
+      "lastModifier" : "admin",
+      "lastModifyDate" : "2023-08-30 08:00:00",
+      "corporationCode" : null,
+      "id" : "BIII",
+      "name" : "BIII参数",
+      "parent" : null,
+      "children" : [ {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : "admin",
+        "createDate" : "2024-02-26 17:34:22",
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-26 17:34:22",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "478b6c43-ca5b-45c4-a0cb-14715f45c98c",
+        "name" : "信用风险-表内风险权重参数表",
+        "parent" : "BIII",
+        "ticked" : true,
+        "children" : [ ],
+        "icon" : "calendar_month",
+        "isFolder" : false,
+        "sortNo" : 100,
+        "isDefault" : true,
+        "pageType" : "TEMPLATE",
+        "templateId" : "47442edb-7b0d-4dc4-ab71-755ddbae71bf",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : null,
+        "createDate" : null,
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-27 15:41:34",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "BWFXQZ",
+        "name" : "信用风险-表外主体权重参数表",
+        "parent" : "BIII",
+        "children" : [ ],
+        "icon" : "calendar_today",
+        "isFolder" : false,
+        "sortNo" : 200,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "1b42b129-b683-4ac0-a8dc-3d39db1eb836",
+        "routeName" : null,
+        "routeQuery" : null
+      } ],
+      "icon" : "folder",
+      "isFolder" : true,
+      "sortNo" : 100,
+      "isDefault" : false,
+      "pageType" : null,
+      "templateId" : null,
+      "routeName" : null,
+      "routeQuery" : null
+    }, {
+      "jpaVersion" : null,
+      "dataComeFrom" : "INPUT",
+      "creator" : "admin",
+      "createDate" : "2024-02-28 13:56:36",
+      "lastModifier" : "admin",
+      "lastModifyDate" : "2024-02-28 13:56:36",
+      "corporationCode" : "_PRIMARY_",
+      "id" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+      "name" : "交易对手信用风险",
+      "parent" : null,
+      "children" : [ {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : "admin",
+        "createDate" : "2024-02-28 14:03:45",
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 14:03:45",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "fac9819a-84a7-46bd-9e89-47e07ebeb31b",
+        "name" : "交易对手信用风险设置",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "settings_suggest",
+        "isFolder" : false,
+        "sortNo" : 100,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "61da07af-351f-4c70-9e58-0ab99ca1d730",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : "admin",
+        "createDate" : "2024-02-28 14:55:57",
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 14:55:57",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "2389c168-12c5-4955-b31f-5090f9dcea4b",
+        "name" : "SACCR监管参数配置",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "settings_applications",
+        "isFolder" : false,
+        "sortNo" : 200,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "df6de052-7f56-42bd-895b-ca09088e0906",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : null,
+        "createDate" : null,
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 16:13:48",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "ec48aefe-1181-4764-9a97-b149f20b520e",
+        "name" : "CVA行业类别映射",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "linear_scale",
+        "isFolder" : false,
+        "sortNo" : 300,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "125dc90f-15cb-4b82-961b-1b7361f0df5e",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : null,
+        "createDate" : null,
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 16:31:40",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "a315ede8-3438-4d00-a60a-c9ef2babc0b1",
+        "name" : "货币优先顺序",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "currency_yen",
+        "isFolder" : false,
+        "sortNo" : 400,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "3fcee541-43f6-480e-827b-6cf021f748eb",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : "admin",
+        "createDate" : "2024-02-28 16:45:56",
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 16:45:56",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "8865a5dd-0a88-4362-9ba9-192009072ad0",
+        "name" : "CVA评级等级映射",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "format_list_numbered",
+        "isFolder" : false,
+        "sortNo" : 500,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "637eea6b-1fcf-4977-a56b-9653b0703c31",
+        "routeName" : null,
+        "routeQuery" : null
+      }, {
+        "jpaVersion" : null,
+        "dataComeFrom" : "INPUT",
+        "creator" : "admin",
+        "createDate" : "2024-02-28 17:08:39",
+        "lastModifier" : "admin",
+        "lastModifyDate" : "2024-02-28 17:08:39",
+        "corporationCode" : "_PRIMARY_",
+        "id" : "62021407-ac21-4fde-a37d-e53865b94aa5",
+        "name" : "CVA权重映射",
+        "parent" : "bc56db9d-c4ad-4d66-9d55-7ae1a9ad3af3",
+        "children" : [ ],
+        "icon" : "percent",
+        "isFolder" : false,
+        "sortNo" : 600,
+        "isDefault" : false,
+        "pageType" : "TEMPLATE",
+        "templateId" : "dacd1de2-8492-4123-b1fb-f8abb4f6346b",
+        "routeName" : null,
+        "routeQuery" : null
+      } ],
+      "icon" : "folder",
+      "isFolder" : true,
+      "sortNo" : 300,
+      "isDefault" : false,
+      "pageType" : null,
+      "templateId" : null,
+      "routeName" : null,
+      "routeQuery" : null
+    } ]
+  }
+}
diff --git a/io.sc.platform.jdbc.driver.oceanbase/build.gradle b/io.sc.platform.jdbc.driver.oceanbase/build.gradle
new file mode 100644
index 00000000..ed431459
--- /dev/null
+++ b/io.sc.platform.jdbc.driver.oceanbase/build.gradle
@@ -0,0 +1,5 @@
+dependencies {
+	api(
+			"com.oceanbase:oceanbase-client:2.4.0",
+	)
+}
diff --git a/io.sc.platform.jdbc.driver.oceanbase/gradle.properties b/io.sc.platform.jdbc.driver.oceanbase/gradle.properties
new file mode 100644
index 00000000..e69de29b
diff --git a/io.sc.platform.jdbc.driver.oceanbase/src/main/resources/META-INF/platform/plugins/jdbc-connection-template.json b/io.sc.platform.jdbc.driver.oceanbase/src/main/resources/META-INF/platform/plugins/jdbc-connection-template.json
new file mode 100644
index 00000000..4267ba66
--- /dev/null
+++ b/io.sc.platform.jdbc.driver.oceanbase/src/main/resources/META-INF/platform/plugins/jdbc-connection-template.json
@@ -0,0 +1,10 @@
+{
+	"installerEnable"	: true,
+	"type"				: "OceanBase",
+	"version"			: "2.4",
+	"driver"			: "com.oceanbase.jdbc.Driver",
+	"url"				: "jdbc:oceanbase://${host}:${port}/${database}",
+	"urlSample"			: "jdbc:oceanbase://localhost:2883/shemaname?pool=false",
+	"hibernateDialect"	: "org.hibernate.dialect.Oracle10gDialect",
+	"validationQuery"   : "select 1 from dual"
+}
\ No newline at end of file
diff --git a/io.sc.platform.mvc.frontend/webpack.env.serve.cjs b/io.sc.platform.mvc.frontend/webpack.env.serve.cjs
index e3f793b4..b8f89d22 100644
--- a/io.sc.platform.mvc.frontend/webpack.env.serve.cjs
+++ b/io.sc.platform.mvc.frontend/webpack.env.serve.cjs
@@ -19,7 +19,7 @@ module.exports = (env)=> merge(common, mf,{
       directory: path.join(__dirname, 'public'),
     },
     compress: false,
-    port: 3000,
+    port: 3001,
     hot: true,
     // 保证在出现 404 错误时，能够导航到 index.html
     historyApiFallback: true,