From bad0b936b5edc26117e5f953c3c4605e8193be78 Mon Sep 17 00:00:00 2001
From: wangshaoping <wspsc@163.com>
Date: Wed, 28 Feb 2024 16:00:29 +0800
Subject: [PATCH] update

---
 io.sc.platform.core.frontend/package.json     |   3 +-
 .../src/components/index.ts                   |  12 +-
 .../src/i18n/messages.json                    |   6 +-
 .../src/i18n/messages_tw_CN.json              |   6 +-
 .../src/i18n/messages_zh_CN.json              |   6 +-
 .../src/menus/menus.json                      |  51 +---
 .../src/platform/components/form/WForm.vue    |   5 +
 .../components/form/elements/WCodeMirror.vue  | 170 +++++++++++++
 .../color => form/elements}/WColorInput.vue   |   4 +-
 .../elements}/WColorInputPalette.vue          |   4 +-
 .../{widget/cron => form/elements}/WCron.vue  |  18 +-
 .../position => form/elements}/WPosition.vue  |   6 +-
 .../elements/w-cron-segment}/DaySegment.vue   |   0
 .../elements/w-cron-segment}/HourSegment.vue  |   0
 .../w-cron-segment}/MinuteSegment.vue         |   0
 .../elements/w-cron-segment}/MonthSegment.vue |   0
 .../w-cron-segment}/SecondSegment.vue         |   0
 .../elements/w-cron-segment}/WeekSegment.vue  |   0
 .../elements/w-cron-segment}/YearSegment.vue  |   0
 .../src/platform/components/index.ts          |  12 +-
 .../components/widget/codemirror/Util.ts      |  72 ------
 .../widget/codemirror/WCodemirror.vue         |  38 ---
 .../widget/codemirror/WCodemirror2.vue        |  31 ---
 .../components/widget/select/WSelect.vue      |   7 -
 .../src/platform/utils/Tools.ts               |  25 ++
 .../src/routes/routes.json                    |  58 +----
 .../src/views/Codemirror.vue                  |  50 ----
 .../src/views/Component.vue                   |  29 ---
 .../src/views/Dialog.vue                      |  37 ---
 .../src/views/Form1.vue                       |  30 ---
 .../src/views/FormElements.vue                |  44 ++++
 .../src/views/Grid1.vue                       |   4 -
 .../src/views/Select.vue                      |  22 --
 .../src/views/Table.vue                       |  64 -----
 .../src/views/TableTitle.vue                  | 118 ---------
 .../src/views/TreeGrid.vue                    | 236 ------------------
 36 files changed, 281 insertions(+), 887 deletions(-)
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/form/elements/WCodeMirror.vue
 rename io.sc.platform.core.frontend/src/platform/components/{widget/color => form/elements}/WColorInput.vue (95%)
 rename io.sc.platform.core.frontend/src/platform/components/{widget/color => form/elements}/WColorInputPalette.vue (98%)
 rename io.sc.platform.core.frontend/src/platform/components/{widget/cron => form/elements}/WCron.vue (86%)
 rename io.sc.platform.core.frontend/src/platform/components/{widget/position => form/elements}/WPosition.vue (94%)
 rename io.sc.platform.core.frontend/src/platform/components/{widget/cron => form/elements/w-cron-segment}/DaySegment.vue (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{widget/cron => form/elements/w-cron-segment}/HourSegment.vue (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{widget/cron => form/elements/w-cron-segment}/MinuteSegment.vue (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{widget/cron => form/elements/w-cron-segment}/MonthSegment.vue (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{widget/cron => form/elements/w-cron-segment}/SecondSegment.vue (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{widget/cron => form/elements/w-cron-segment}/WeekSegment.vue (100%)
 rename io.sc.platform.core.frontend/src/platform/components/{widget/cron => form/elements/w-cron-segment}/YearSegment.vue (100%)
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/widget/codemirror/Util.ts
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/widget/codemirror/WCodemirror.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/widget/codemirror/WCodemirror2.vue
 delete mode 100644 io.sc.platform.core.frontend/src/platform/components/widget/select/WSelect.vue
 delete mode 100644 io.sc.platform.core.frontend/src/views/Codemirror.vue
 delete mode 100644 io.sc.platform.core.frontend/src/views/Component.vue
 delete mode 100644 io.sc.platform.core.frontend/src/views/Dialog.vue
 delete mode 100644 io.sc.platform.core.frontend/src/views/Form1.vue
 create mode 100644 io.sc.platform.core.frontend/src/views/FormElements.vue
 delete mode 100644 io.sc.platform.core.frontend/src/views/Grid1.vue
 delete mode 100644 io.sc.platform.core.frontend/src/views/Select.vue
 delete mode 100644 io.sc.platform.core.frontend/src/views/Table.vue
 delete mode 100644 io.sc.platform.core.frontend/src/views/TableTitle.vue
 delete mode 100644 io.sc.platform.core.frontend/src/views/TreeGrid.vue

diff --git a/io.sc.platform.core.frontend/package.json b/io.sc.platform.core.frontend/package.json
index 58bb5556..f8a23963 100644
--- a/io.sc.platform.core.frontend/package.json
+++ b/io.sc.platform.core.frontend/package.json
@@ -99,7 +99,6 @@
   "dependencies": {
     "@codemirror/autocomplete": "6.11.1",
     "@codemirror/commands": "6.3.3",
-    "@codemirror/lint": "6.5.0",
     "@codemirror/lang-html": "6.4.7",
     "@codemirror/lang-java": "6.0.1",
     "@codemirror/lang-javascript": "6.2.1",
@@ -121,7 +120,7 @@
     "luckyexcel": "1.0.1",
     "mockjs": "1.1.0",
     "pinia": "2.1.7",
-    "quasar": "2.14.2",
+    "quasar": "2.14.5",
     "tailwindcss": "3.4.0",
     "vue": "3.4.3",
     "vue-codemirror6": "1.2.0",
diff --git a/io.sc.platform.core.frontend/src/components/index.ts b/io.sc.platform.core.frontend/src/components/index.ts
index 0821f0e6..7f05c927 100644
--- a/io.sc.platform.core.frontend/src/components/index.ts
+++ b/io.sc.platform.core.frontend/src/components/index.ts
@@ -2,11 +2,7 @@
  * 此文件为自动生成文件,请勿修改
  */
 
-import component from '@/views/Component.vue';
-import dialog from '@/views/Dialog.vue';
-import codemirror from '@/views/Codemirror.vue';
-import select from '@/views/Select.vue';
-import treeGrid from '@/views/TreeGrid.vue';
+import formElements from '@/views/FormElements.vue';
 import likmDialog from '@/views/likm/Dialog.vue';
 import likmDrawer from '@/views/likm/Drawer.vue';
 import likmForm from '@/views/likm/Form.vue';
@@ -18,11 +14,7 @@ import gridLayout from '@/views/likm/GridLayout.vue';
 import likmTreeGrid from '@/views/likm/TreeGrid.vue';
 
 const localComponents = {
-  'component.testcase.component': component,
-  'component.testcase.dialog': dialog,
-  'component.testcase.codemirror': codemirror,
-  'component.testcase.select': select,
-  'component.testcase.treeGrid': treeGrid,
+  'component.testcase.formElements': formElements,
   'component.testcase.likmDialog': likmDialog,
   'component.testcase.likmDrawer': likmDrawer,
   'component.testcase.likmForm': likmForm,
diff --git a/io.sc.platform.core.frontend/src/i18n/messages.json b/io.sc.platform.core.frontend/src/i18n/messages.json
index 318af431..5dd6a83a 100644
--- a/io.sc.platform.core.frontend/src/i18n/messages.json
+++ b/io.sc.platform.core.frontend/src/i18n/messages.json
@@ -1,8 +1,4 @@
 {
   "menu.testcase": "Test Case",
-  "menu.testcase.component": "Component",
-  "menu.testcase.dialog": "Dialog",
-  "menu.testcase.select": "Select",
-  "menu.testcase.treeGrid": "Tree Grid",
-  "menu.testcase.table": "Table"
+  "menu.testcase.formElements": "Form Elements"
 }
diff --git a/io.sc.platform.core.frontend/src/i18n/messages_tw_CN.json b/io.sc.platform.core.frontend/src/i18n/messages_tw_CN.json
index 3fcb71be..8ef29361 100644
--- a/io.sc.platform.core.frontend/src/i18n/messages_tw_CN.json
+++ b/io.sc.platform.core.frontend/src/i18n/messages_tw_CN.json
@@ -1,8 +1,4 @@
 {
   "menu.testcase": "測試用例",
-  "menu.testcase.component": "組件",
-  "menu.testcase.dialog": "Dialog",
-  "menu.testcase.select": "Select",
-  "menu.testcase.treeGrid": "Tree Grid",
-  "menu.testcase.table": "Table"
+  "menu.testcase.formElements": "表單控件"
 }
diff --git a/io.sc.platform.core.frontend/src/i18n/messages_zh_CN.json b/io.sc.platform.core.frontend/src/i18n/messages_zh_CN.json
index 2e559551..d90ce270 100644
--- a/io.sc.platform.core.frontend/src/i18n/messages_zh_CN.json
+++ b/io.sc.platform.core.frontend/src/i18n/messages_zh_CN.json
@@ -1,8 +1,4 @@
 {
   "menu.testcase": "测试用例",
-  "menu.testcase.component": "组件",
-  "menu.testcase.dialog": "Dialog",
-  "menu.testcase.select": "Select",
-  "menu.testcase.treeGrid": "Tree Grid",
-  "menu.testcase.table": "Table"
+  "menu.testcase.formElements": "表单控件"
 }
diff --git a/io.sc.platform.core.frontend/src/menus/menus.json b/io.sc.platform.core.frontend/src/menus/menus.json
index ea2194d4..6f0b4f75 100644
--- a/io.sc.platform.core.frontend/src/menus/menus.json
+++ b/io.sc.platform.core.frontend/src/menus/menus.json
@@ -22,55 +22,10 @@
     "type": "ROUTE",
     "order": 100,
     "parentId": "menu.testcase",
-    "id": "menu.testcase.component",
-    "titleI18nKey": "menu.testcase.component",
+    "id": "menu.testcase.formElements",
+    "titleI18nKey": "menu.testcase.formElements",
     "icon": "bi-palette",
-    "routeName": "route.testcase.component"
-  },
-  {
-    "type": "ROUTE",
-    "order": 200,
-    "parentId": "menu.testcase",
-    "id": "menu.testcase.dialog",
-    "titleI18nKey": "menu.testcase.dialog",
-    "icon": "bi-palette",
-    "routeName": "route.testcase.dialog"
-  },
-  {
-    "type": "ROUTE",
-    "order": 300,
-    "parentId": "menu.testcase",
-    "id": "menu.testcase.codemirror",
-    "titleI18nKey": "menu.testcase.codemirror",
-    "icon": "bi-palette",
-    "routeName": "route.testcase.codemirror"
-  },
-  {
-    "type": "ROUTE",
-    "order": 400,
-    "parentId": "menu.testcase",
-    "id": "menu.testcase.select",
-    "titleI18nKey": "menu.testcase.select",
-    "icon": "bi-palette",
-    "routeName": "route.testcase.select"
-  },
-  {
-    "type": "ROUTE",
-    "order": 400,
-    "parentId": "menu.testcase",
-    "id": "menu.testcase.treeGrid",
-    "titleI18nKey": "menu.testcase.treeGrid",
-    "icon": "bi-palette",
-    "routeName": "route.testcase.treeGrid"
-  },
-  {
-    "type": "ROUTE",
-    "order": 400,
-    "parentId": "menu.testcase",
-    "id": "menu.testcase.table",
-    "titleI18nKey": "menu.testcase.table",
-    "icon": "bi-palette",
-    "routeName": "route.testcase.table"
+    "routeName": "route.testcase.formElements"
   },
   { "type": "GROUP", "order": 30000, "id": "menu.testcase.likm", "titleI18nKey": "测试用例-likm", "icon": "home" },
   {
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 3a964453..6c980284 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
@@ -72,6 +72,11 @@ let fields_ = ref([...props.fields]);
 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',
+  'color-input-palette': 'w-color-input-palette',
+  'code-mirror': 'w-code-mirror',
+  position: 'w-position',
   date: 'w-date',
   number: 'w-number',
   select: 'w-select',
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WCodeMirror.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WCodeMirror.vue
new file mode 100644
index 00000000..bd37bc5e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WCodeMirror.vue
@@ -0,0 +1,170 @@
+<template>
+  <q-field v-bind="attrs" :stack-label="stackLabelRef" @focus="focus" @blur="blur">
+    <template #control>
+      <div ref="codemirrorRef" style="width: 100%"></div>
+    </template>
+  </q-field>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs, onMounted, onUnmounted, onUpdated } from 'vue';
+import { Tools } from '@/platform';
+import { EditorView } from '@codemirror/view';
+import { EditorState, 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 } from '@codemirror/lang-html';
+import { java } from '@codemirror/lang-java';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { sql } from '@codemirror/lang-sql';
+import { xml } from '@codemirror/lang-xml';
+
+const attrs = useAttrs();
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  lang: { type: String, default: 'json' },
+  width: { type: [Number, String], default: '100%' },
+  height: { type: [Number, String], default: undefined },
+  rows: { type: Number, default: 4 },
+  tabSize: { type: Number, default: 4 },
+});
+
+const emits = defineEmits(['update:modelValue']);
+
+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(),
+
+  autocomplete.closeBrackets(),
+  autocomplete.autocompletion(),
+
+  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();
+  }
+};
+
+const codemirrorRef = ref();
+// q-field 的 stack-label 属性是对 field 的 label 进行设置效果
+// 如果 field 有值时, 无论是否获得焦点 label 都缩小显示
+// 如果 field 无值时, 如果 field 获得焦点 label 就缩小显示, 否则 label 放大显示
+const stackLabelRef = ref(!Tools.isUndefinedOrNull(props.modelValue));
+
+let editorView;
+let isFocus = false;
+
+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)),
+        EditorView.theme({
+          '&': {
+            outline: 'none !important',
+            width: Tools.px(props.width),
+            height: props.height ? Tools.px(props.height) : props.rows * 22 + 'px',
+          },
+        }),
+        // 以下代码可以添加内容变化后的操作, 为避免重复操作, 更新操作放到 blur 方法中了
+        EditorView.updateListener.of(function (e) {
+          emits('update:modelValue', e.state.doc.toString());
+        }),
+      ],
+      parent: codemirrorRef.value,
+      doc: props.modelValue,
+    });
+  }
+});
+
+onUnmounted(() => {
+  editorView.destroy();
+});
+
+onUpdated(() => {
+  if (!isFocus) {
+    // 当未获得焦点时,更新变更, 当获得焦点时不能更新
+    editorView.dispatch({ changes: { from: 0, to: editorView.state.doc.length, insert: props.modelValue } });
+  }
+});
+
+const focus = () => {
+  isFocus = true;
+  stackLabelRef.value = true;
+};
+
+const blur = () => {
+  isFocus = false;
+  const content = editorView.state.doc.toString();
+  //emits('update:modelValue', content);
+  if (content) {
+    stackLabelRef.value = true;
+  } else {
+    stackLabelRef.value = false;
+  }
+};
+
+const getValue = () => {
+  return editorView.state.doc.toString();
+};
+
+const setValue = (value: string) => {
+  editorView.dispatch({ changes: { from: 0, to: editorView.state.doc.length, insert: value } });
+};
+
+defineExpose({
+  getValue,
+  setValue,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/color/WColorInput.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInput.vue
similarity index 95%
rename from io.sc.platform.core.frontend/src/platform/components/widget/color/WColorInput.vue
rename to io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInput.vue
index 589e8efd..6b2a674d 100644
--- a/io.sc.platform.core.frontend/src/platform/components/widget/color/WColorInput.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInput.vue
@@ -49,8 +49,8 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue']);
 
 const isShow = ref(false);
-const colorValueRef = ref(props.modelValue);
-const restoreValue = toRaw(props.modelValue);
+const colorValueRef = ref(props.modelValue || '#000000');
+const restoreValue = toRaw(props.modelValue || '#000000');
 
 const computedColorValue = computed(() => {
   return colorValueRef.value;
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/color/WColorInputPalette.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInputPalette.vue
similarity index 98%
rename from io.sc.platform.core.frontend/src/platform/components/widget/color/WColorInputPalette.vue
rename to io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInputPalette.vue
index c0737160..23422684 100644
--- a/io.sc.platform.core.frontend/src/platform/components/widget/color/WColorInputPalette.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInputPalette.vue
@@ -271,8 +271,8 @@ const quasarColors = [
 ];
 
 const isShow = ref(false);
-const colorValueRef = ref(props.modelValue);
-const restoreValue = toRaw(props.modelValue);
+const colorValueRef = ref(props.modelValue || 'black');
+const restoreValue = toRaw(props.modelValue || 'black');
 
 const computedColorValue = computed(() => {
   return colorValueRef.value;
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/cron/WCron.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WCron.vue
similarity index 86%
rename from io.sc.platform.core.frontend/src/platform/components/widget/cron/WCron.vue
rename to io.sc.platform.core.frontend/src/platform/components/form/elements/WCron.vue
index 4d161f04..c538fcec 100644
--- a/io.sc.platform.core.frontend/src/platform/components/widget/cron/WCron.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WCron.vue
@@ -45,13 +45,13 @@
 <script setup lang="ts">
 import { ref, useAttrs } from 'vue';
 import { Tools } from '@/platform';
-import SecondSegment from './SecondSegment.vue';
-import MinuteSegment from './MinuteSegment.vue';
-import HourSegment from './HourSegment.vue';
-import DaySegment from './DaySegment.vue';
-import MonthSegment from './MonthSegment.vue';
-import WeekSegment from './WeekSegment.vue';
-import YearSegment from './YearSegment.vue';
+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';
 
 const attrs = useAttrs();
 
@@ -63,8 +63,8 @@ const emit = defineEmits(['update:modelValue']);
 const isShow = ref(false);
 const selectedTab = ref('second');
 
-const valueRef = ref(props.modelValue);
-const splits = props.modelValue.split(' ');
+const valueRef = ref(props.modelValue || '');
+const splits = (props.modelValue || '').split(' ');
 const secondValueRef = ref(splits[0]);
 const minuteValueRef = ref(splits[1]);
 const hourValueRef = ref(splits[2]);
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/position/WPosition.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WPosition.vue
similarity index 94%
rename from io.sc.platform.core.frontend/src/platform/components/widget/position/WPosition.vue
rename to io.sc.platform.core.frontend/src/platform/components/form/elements/WPosition.vue
index 125ad8fc..1b1ff52e 100644
--- a/io.sc.platform.core.frontend/src/platform/components/widget/position/WPosition.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WPosition.vue
@@ -49,7 +49,7 @@
 import { ref, toRaw, computed } from 'vue';
 
 const props = defineProps({
-  modelValue: { type: String, default: '#000000' },
+  modelValue: { type: String, default: '' },
   restore: { type: Boolean, default: false },
 });
 const emit = defineEmits(['update:modelValue']);
@@ -57,8 +57,8 @@ const emit = defineEmits(['update:modelValue']);
 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);
+const positionValueRef = ref(props.modelValue || '');
+const restoreValue = toRaw(props.modelValue || '');
 
 const computedStoreBackgroundColorValue = computed(() => {
   const color: string = restoreValue;
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/cron/DaySegment.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/DaySegment.vue
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/widget/cron/DaySegment.vue
rename to io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/DaySegment.vue
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/cron/HourSegment.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/HourSegment.vue
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/widget/cron/HourSegment.vue
rename to io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/HourSegment.vue
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/cron/MinuteSegment.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/MinuteSegment.vue
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/widget/cron/MinuteSegment.vue
rename to io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/MinuteSegment.vue
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/cron/MonthSegment.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/MonthSegment.vue
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/widget/cron/MonthSegment.vue
rename to io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/MonthSegment.vue
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/cron/SecondSegment.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/SecondSegment.vue
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/widget/cron/SecondSegment.vue
rename to io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/SecondSegment.vue
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/cron/WeekSegment.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/WeekSegment.vue
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/widget/cron/WeekSegment.vue
rename to io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/WeekSegment.vue
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/cron/YearSegment.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/YearSegment.vue
similarity index 100%
rename from io.sc.platform.core.frontend/src/platform/components/widget/cron/YearSegment.vue
rename to io.sc.platform.core.frontend/src/platform/components/form/elements/w-cron-segment/YearSegment.vue
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 f7c35f19..52e02bc1 100644
--- a/io.sc.platform.core.frontend/src/platform/components/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/index.ts
@@ -3,17 +3,19 @@ import WPlatformPage from './app/WPlatformPage.vue';
 import WHScreenDiv from './layout/WHScreenDiv.vue';
 import WVExpandDiv from './layout/WVExpandDiv.vue';
 import WIconEmpty from './icon/WIconEmpty.vue';
-import WColorInput from './widget/color/WColorInput.vue';
-import WColorInputPalette from './widget/color/WColorInputPalette.vue';
-import WCron from './widget/cron/WCron.vue';
-import WPosition from './widget/position/WPosition.vue';
-import WCodeMirror from './widget/codemirror/WCodeMirror.vue';
 import WTreeGrid from './tree/WTreeGrid.vue';
 
 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 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';
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/codemirror/Util.ts b/io.sc.platform.core.frontend/src/platform/components/widget/codemirror/Util.ts
deleted file mode 100644
index 9fdb90c2..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/widget/codemirror/Util.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
-  EditorView,
-  lineNumbers,
-  highlightActiveLineGutter,
-  highlightSpecialChars,
-  drawSelection,
-  dropCursor,
-  rectangularSelection,
-  crosshairCursor,
-  highlightActiveLine,
-  keymap,
-} from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
-import { foldGutter, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap } from '@codemirror/language';
-import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
-import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
-import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
-import { lintKeymap } from '@codemirror/lint';
-
-import { html } from '@codemirror/lang-html';
-import { java } from '@codemirror/lang-java';
-import { javascript } from '@codemirror/lang-javascript';
-import { json } from '@codemirror/lang-json';
-import { sql } from '@codemirror/lang-sql';
-import { xml } from '@codemirror/lang-xml';
-
-export const basicSetup = [
-  //lineNumbers(),
-  highlightActiveLineGutter(),
-  highlightSpecialChars(),
-  history(),
-  //foldGutter(),
-  drawSelection(),
-  dropCursor(),
-  EditorState.allowMultipleSelections.of(true),
-  indentOnInput(),
-  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-  bracketMatching(),
-  closeBrackets(),
-  autocompletion(),
-  rectangularSelection(),
-  crosshairCursor(),
-  //highlightActiveLine(),
-  highlightSelectionMatches(),
-  keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...searchKeymap, ...historyKeymap, ...foldKeymap, ...completionKeymap, ...lintKeymap]),
-];
-
-export const basicTheme = () => {
-  return EditorView.theme({
-    '.cm-editor': {
-      outline: 'none !important',
-    },
-  });
-};
-
-export const getLanguage = (lang: string) => {
-  if (lang === 'html') {
-    return html();
-  } else if (lang === 'java') {
-    return java();
-  } else if (lang === 'javascript') {
-    return javascript();
-  } else if (lang === 'json') {
-    return json();
-  } else if (lang === 'sql') {
-    return sql();
-  } else if (lang === 'xml') {
-    return xml();
-  } else {
-    return json();
-  }
-};
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/codemirror/WCodemirror.vue b/io.sc.platform.core.frontend/src/platform/components/widget/codemirror/WCodemirror.vue
deleted file mode 100644
index d5542dfa..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/widget/codemirror/WCodemirror.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <q-field :v-bind="attrs">
-    <template #control>
-      <div ref="codemirrorRef" class="border border-red-500" style="padding-top: 1px"></div>
-    </template>
-  </q-field>
-</template>
-<script setup lang="ts">
-import { ref, useAttrs, onMounted, onUnmounted } from 'vue';
-import { EditorView } from '@codemirror/view';
-import { basicSetup, basicTheme, getLanguage } from './Util';
-
-const attrs = useAttrs();
-
-const props = defineProps({
-  lang: { type: String, default: 'json' },
-});
-
-const codemirrorRef = ref();
-let view;
-
-onMounted(() => {
-  view = new EditorView({
-    extensions: [basicSetup, getLanguage(props.lang), basicTheme()],
-    parent: codemirrorRef.value,
-  });
-});
-
-onUnmounted(() => {
-  view.destroy();
-});
-const value = ref('<xml><a name="name"></a></xml>');
-</script>
-<style>
-.cm-editor {
-  outline: none !important;
-}
-</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/codemirror/WCodemirror2.vue b/io.sc.platform.core.frontend/src/platform/components/widget/codemirror/WCodemirror2.vue
deleted file mode 100644
index bfcd294f..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/widget/codemirror/WCodemirror2.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div>
-    <CodeMirror basic :lang="language" class="overflow-y-auto" v-bind="attrs"></CodeMirror>
-  </div>
-</template>
-<script setup lang="ts">
-import { useAttrs, ref, onMounted } from 'vue';
-import CodeMirror from 'vue-codemirror6';
-import { java } from '@codemirror/lang-java';
-import { json } from '@codemirror/lang-json';
-import { sql } from '@codemirror/lang-sql';
-import { xml } from '@codemirror/lang-xml';
-
-const attrs = useAttrs();
-const props = defineProps({
-  lang: { type: String, default: 'json' },
-});
-
-let language = json();
-if (props.lang === 'java') {
-  language = java();
-} else if (props.lang === 'json') {
-  language = json();
-} else if (props.lang === 'sql') {
-  language = sql();
-} else if (props.lang === 'xml') {
-  language = xml();
-}
-
-console.log(props.lang);
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/widget/select/WSelect.vue b/io.sc.platform.core.frontend/src/platform/components/widget/select/WSelect.vue
deleted file mode 100644
index 225e192e..00000000
--- a/io.sc.platform.core.frontend/src/platform/components/widget/select/WSelect.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <q-select outlined emit-value map-options v-bind="attrs" />
-</template>
-<script setup lang="ts">
-import { useAttrs } from 'vue';
-const attrs = useAttrs();
-</script>
diff --git a/io.sc.platform.core.frontend/src/platform/utils/Tools.ts b/io.sc.platform.core.frontend/src/platform/utils/Tools.ts
index 904f0c34..145c6a7d 100644
--- a/io.sc.platform.core.frontend/src/platform/utils/Tools.ts
+++ b/io.sc.platform.core.frontend/src/platform/utils/Tools.ts
@@ -46,6 +46,15 @@ class Tools {
     return !Tools.isUndefinedOrNull(obj) && typeof obj === 'string';
   }
 
+  /**
+   * 判断一个对象是否是数字
+   * @param obj 对象
+   * @returns 对象是否是数字
+   */
+  public static isNumber(obj: any): boolean {
+    return !isNaN(parseFloat(obj)) && isFinite(obj);
+  }
+
   /**
    * 判断一个对象是否是对象类型
    * @param obj 对象
@@ -806,6 +815,22 @@ class Tools {
       return (c === 'x' ? random : (random & 0x3) | 0x8).toString(16);
     });
   }
+
+  /**
+   * 计算像素
+   * @param value 值
+   * @returns 像素值
+   */
+  public static px(value: any) {
+    if (Tools.isUndefinedOrNull(value)) {
+      return null;
+    }
+    if (Tools.isNumber(value)) {
+      return value + 'px';
+    } else {
+      return value;
+    }
+  }
 }
 
 export { Tools };
diff --git a/io.sc.platform.core.frontend/src/routes/routes.json b/io.sc.platform.core.frontend/src/routes/routes.json
index da489078..e15d3bc2 100644
--- a/io.sc.platform.core.frontend/src/routes/routes.json
+++ b/io.sc.platform.core.frontend/src/routes/routes.json
@@ -1,62 +1,14 @@
 [
   {
-    "name": "route.testcase.component",
-    "path": "testcase/component",
+    "name": "route.testcase.formElements",
+    "path": "testcase/formElements",
     "parent": "/",
     "priority": 0,
-    "component": "component.testcase.component",
-    "componentPath": "@/views/Component.vue",
+    "component": "component.testcase.formElements",
+    "componentPath": "@/views/FormElements.vue",
     "redirect": null,
     "meta": {
-      "permissions": ["/testcase/component/**/*"]
-    }
-  },
-  {
-    "name": "route.testcase.dialog",
-    "path": "testcase/dialog",
-    "parent": "/",
-    "priority": 0,
-    "component": "component.testcase.dialog",
-    "componentPath": "@/views/Dialog.vue",
-    "redirect": null,
-    "meta": {
-      "permissions": ["/testcase/dialog/**/*"]
-    }
-  },
-  {
-    "name": "route.testcase.codemirror",
-    "path": "testcase/codemirror",
-    "parent": "/",
-    "priority": 0,
-    "component": "component.testcase.codemirror",
-    "componentPath": "@/views/Codemirror.vue",
-    "redirect": null,
-    "meta": {
-      "permissions": ["/testcase/codemirror/**/*"]
-    }
-  },
-  {
-    "name": "route.testcase.select",
-    "path": "testcase/select",
-    "parent": "/",
-    "priority": 0,
-    "component": "component.testcase.select",
-    "componentPath": "@/views/Select.vue",
-    "redirect": null,
-    "meta": {
-      "permissions": ["/testcase/select/**/*"]
-    }
-  },
-  {
-    "name": "route.testcase.treeGrid",
-    "path": "testcase/treeGrid",
-    "parent": "/",
-    "priority": 0,
-    "component": "component.testcase.treeGrid",
-    "componentPath": "@/views/TreeGrid.vue",
-    "redirect": null,
-    "meta": {
-      "permissions": ["/testcase/treeGrid/**/*"]
+      "permissions": ["/testcase/formElements/**/*"]
     }
   },
   {
diff --git a/io.sc.platform.core.frontend/src/views/Codemirror.vue b/io.sc.platform.core.frontend/src/views/Codemirror.vue
deleted file mode 100644
index bc65913a..00000000
--- a/io.sc.platform.core.frontend/src/views/Codemirror.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <!-- <w-codemirror
-    v-model="value"
-    lang="xml"
-    placeholder="Code goes here..."
-    :autofocus="false"
-    :tab-size="2"
-    :style="{ height: '200px', padding: '20px' }"
-  ></w-codemirror> -->
-  <q-input outlined label="OK"></q-input>
-  <label class="q-field row no-wrap items-start q-field--outlined q-input q-field--labeled" for="f_eef31e6a-a3a8-4a87-b35c-481f40af889e">
-    <div class="q-field__inner relative-position col self-stretch">
-      <div class="q-field__control relative-position row no-wrap" tabindex="-1">
-        <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip"></div>
-      </div>
-    </div>
-  </label>
-
-  <div class="rounded-md" style="border: 1px solid #e5e7eb">
-    <div class="px-3 text-gray-600 text-xs">OK</div>
-    <div ref="codemirrorRef" class="py-1"></div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { EditorView, basicSetup } from 'codemirror';
-import { javascript } from '@codemirror/lang-javascript';
-
-const codemirrorRef = ref();
-let view;
-
-onMounted(() => {
-  view = new EditorView({
-    extensions: [basicSetup, javascript()],
-    parent: codemirrorRef.value,
-  });
-  //view.destroy();
-});
-
-onUnmounted(() => {
-  console.log('>>>>>>');
-  view.destroy();
-});
-const value = ref('<xml><a name="name"></a></xml>');
-</script>
-<style>
-.cm-editor2 {
-  outline: none !important;
-}
-</style>
diff --git a/io.sc.platform.core.frontend/src/views/Component.vue b/io.sc.platform.core.frontend/src/views/Component.vue
deleted file mode 100644
index fc083220..00000000
--- a/io.sc.platform.core.frontend/src/views/Component.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <q-splitter v-model="splitWidthRef" style="height: 250px">
-    <template #before>
-      <q-tabs v-model="selectedTab" vertical no-caps>
-        <q-tab name="cron" label="w-cron" />
-        <q-tab name="codemirror" label="w-code-mirror" />
-      </q-tabs>
-    </template>
-
-    <template #after>
-      <q-tab-panels v-model="selectedTab" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up">
-        <q-tab-panel name="cron">
-          <w-cron v-model="valueRef" label="cron" outlined dense style="width: 200px"></w-cron>
-        </q-tab-panel>
-        <q-tab-panel name="codemirror">
-          <w-code-mirror v-model="valueRef" label="codemirror" lang="sql" outlined dense></w-code-mirror>
-          <q-input v-model="valueRef" label="codemirror" outlined dense></q-input>
-        </q-tab-panel>
-      </q-tab-panels>
-    </template>
-  </q-splitter>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const selectedTab = ref('codemirror');
-const splitWidthRef = ref(20);
-const valueRef = ref('* * * * * *');
-</script>
diff --git a/io.sc.platform.core.frontend/src/views/Dialog.vue b/io.sc.platform.core.frontend/src/views/Dialog.vue
deleted file mode 100644
index 22c37731..00000000
--- a/io.sc.platform.core.frontend/src/views/Dialog.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <w-dialog
-    ref="dialogRef"
-    :persistent="true"
-    :maximized="true"
-    title="xxx"
-    width="50%"
-    height="50%"
-    :can-maximize="true"
-    :actions="[
-      {
-        icon: PlatformIconEnum.保存,
-        label: '保存',
-        loading: false,
-        click: async () => {},
-      },
-    ]"
-    @maximize="dialogMaximize"
-  ></w-dialog>
-</template>
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import { PlatformIconEnum, DialogManager } from '@/platform';
-
-const dialogRef = ref();
-
-const dialogMaximize = (maximizedToggle: boolean) => {
-  console.log(maximizedToggle);
-};
-
-onMounted(() => {
-  //dialogRef.value.show();
-  DialogManager.confirm('kdjflksjdf', () => {
-    console.log('ok');
-  });
-});
-</script>
diff --git a/io.sc.platform.core.frontend/src/views/Form1.vue b/io.sc.platform.core.frontend/src/views/Form1.vue
deleted file mode 100644
index 444f06df..00000000
--- a/io.sc.platform.core.frontend/src/views/Form1.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <w-form :fields="fields" :cols-num-auto="false" :cols-num="3"></w-form>
-  </div>
-</template>
-<script setup lang="ts">
-const fields = [
-  {
-    label: '姓名',
-    name: 'name',
-    type: 'text',
-    required: true,
-    colspan: 2,
-    button: {
-      round: false,
-      icon: 'home',
-      label: '选择',
-      click: () => {
-        console.info('11111');
-      },
-    },
-  },
-  {
-    label: '年龄',
-    name: 'age',
-    type: 'number',
-    required: true,
-  },
-];
-</script>
diff --git a/io.sc.platform.core.frontend/src/views/FormElements.vue b/io.sc.platform.core.frontend/src/views/FormElements.vue
new file mode 100644
index 00000000..0379af5a
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/FormElements.vue
@@ -0,0 +1,44 @@
+<template>
+  <q-splitter v-model="splitWidthRef">
+    <template #before>
+      <q-tabs v-model="selectedTab" vertical no-caps>
+        <q-tab name="formElements" label="Form Elements" />
+        <q-tab name="codemirror" label="w-code-mirror" />
+      </q-tabs>
+    </template>
+
+    <template #after>
+      <q-tab-panels v-model="selectedTab" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up">
+        <q-tab-panel name="formElements">
+          <w-form
+            :cols-num="1"
+            :fields="[
+              { name: 'color', label: 'please select color', type: 'color-input', outlined: true, dense: true },
+              { name: 'colorPalette', label: 'please select color palette', type: 'color-input-palette', outlined: true, dense: true },
+              { name: 'codemirror', label: 'please input SQL', type: 'code-mirror', outlined: true, lang: 'sql', dense: true, rows: 5 },
+              { name: 'cron', label: 'please input cron expression', type: 'cron', outlined: true, dense: true },
+              { name: 'position', label: 'please select position', type: 'position', outlined: true, dense: true },
+            ]"
+          >
+          </w-form>
+        </q-tab-panel>
+        <q-tab-panel name="codemirror">
+          <q-input v-model="valueRef" label="please input number 1:" outlined dense clearable></q-input>
+          <w-code-mirror v-model="valueRef" label="please input SQL:" lang="sql" outlined dense></w-code-mirror>
+          <q-input v-model="valueRef" label="please input number 2:" outlined dense clearable></q-input>
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-splitter>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const selectedTab = ref('formElements');
+const splitWidthRef = ref(20);
+const valueRef = ref('xxxx');
+
+const focus = () => {
+  console.log('sfsdf');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/views/Grid1.vue b/io.sc.platform.core.frontend/src/views/Grid1.vue
deleted file mode 100644
index d7e5272c..00000000
--- a/io.sc.platform.core.frontend/src/views/Grid1.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<template>
-  <div>2222</div>
-</template>
-<script setup lang="ts"></script>
diff --git a/io.sc.platform.core.frontend/src/views/Select.vue b/io.sc.platform.core.frontend/src/views/Select.vue
deleted file mode 100644
index 69fb1bba..00000000
--- a/io.sc.platform.core.frontend/src/views/Select.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <w-select v-model="model" :options="options" label="Status" @update:model-value="valueChanged" />
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { EnumTools } from '@/platform';
-import { QBtn } from 'quasar';
-
-const { t } = useI18n();
-const model = ref('value');
-const options = ref();
-
-EnumTools.fetch('io.sc.platform.flowable.enums.ProcessStatus', t).then((data) => {
-  console.log(data.map);
-  options.value = data.map;
-});
-
-const valueChanged = (value) => {
-  console.log(value);
-};
-</script>
diff --git a/io.sc.platform.core.frontend/src/views/Table.vue b/io.sc.platform.core.frontend/src/views/Table.vue
deleted file mode 100644
index 72a4bc62..00000000
--- a/io.sc.platform.core.frontend/src/views/Table.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <w-grid
-          :tree="true"
-          :title="$t('system.corporation.grid.title')"
-          :data-url="Environment.apiContextPath('/api/system/corporation')"
-          selection="multiple"
-          :checkbox-selection="false"
-          :pageable="false"
-          :full-screen-button="false"
-          :tree-icon="
-            (row) => {
-              return { name: 'folder', color: 'amber' };
-            }
-          "
-          :toolbar-configure="{ noIcon: false }"
-          :toolbar-actions="['refresh', 'separator', ['addTop', 'addChild'], 'edit', 'remove', 'separator', 'view']"
-          :columns="[
-            { width: '100%', name: 'name', label: $t('name') },
-            { width: 150, name: 'code', label: $t('code') },
-            { width: 90, name: 'dataComeFrom', label: $t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
-            { width: 100, name: 'lastModifier', label: $t('lastModifier') },
-            { width: 110, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() },
-            { width: 80, name: 'enable', label: $t('status'), format: Formater.enableTag() },
-          ]"
-          :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: '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: (value) => value },
-                { name: 'dataComeFrom', label: $t('dataComeFrom'), format: (value) => value },
-                { name: 'creator', label: $t('creator') },
-                { name: 'createDate', label: $t('createDate') },
-                { name: 'lastModifier', label: $t('lastModifier') },
-                { name: 'lastModifyDate', label: $t('lastModifyDate'), format: (value) => value },
-              ],
-            },
-          }"
-        ></w-grid>
-</template>
-
-<script setup lang="ts">
-import { Environment,Formater,Options } from '@/platform';
-
-
-</script>
diff --git a/io.sc.platform.core.frontend/src/views/TableTitle.vue b/io.sc.platform.core.frontend/src/views/TableTitle.vue
deleted file mode 100644
index 17ee9b13..00000000
--- a/io.sc.platform.core.frontend/src/views/TableTitle.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-  <div class="flex flex-nowrap py-2">
-    <div ref="titleContainerRef" class="flex items-end text-subtitle2 text-no-wrap">{{ title }}</div>
-    <q-space />
-    <div ref="actionContainerRef" class="flex flex-nowrap">
-      <!-- baseActions -->
-      <template v-for="(action, index) in baseActions" :key="'baseAction_' + index">
-        <q-separator
-          v-if="action.separator"
-          vertical
-          class="class-action-item"
-          :style="{
-            'margin-left': '5px',
-            'margin-right': '5px',
-          }"
-        />
-        <q-btn
-          v-else
-          v-bind="action"
-          :id="action.name"
-          :disable="action.enableIf ? !action.enableIf() : false"
-          no-wrap
-          class="class-action-item"
-          :style="{
-            'margin-left': '5px',
-            'margin-right': '5px',
-          }"
-          @click="action.click"
-        />
-      </template>
-
-      <!-- moreActions -->
-      <q-btn-dropdown v-if="moreActions && moreActions.length > 0" :label="$t('more')" class="class-action-item" style="margin-left: 5px">
-        <q-list>
-          <template v-for="(action, index) in moreActions" :key="'moreAction_' + index">
-            <q-separator v-if="action.separator" />
-            <q-item v-else v-close-popup clickable @click="action.click">
-              <q-item-section avatar style="min-width: 28px; padding-right: 0px">
-                <q-icon :name="action.icon" size="20px" />
-              </q-item-section>
-              <q-item-section>
-                <q-item-label :v-bind="action">{{ action.label }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-list>
-      </q-btn-dropdown>
-    </div>
-    <q-resize-observer @resize="onResize" />
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-import { Tools } from '@/platform/utils';
-
-const props = defineProps({
-  title: { type: String, default: '' },
-  actions: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-});
-
-const titleContainerRef = ref();
-const actionContainerRef = ref();
-
-const actions = props.actions;
-const baseActions = ref(actions);
-const moreActions = ref([]);
-const isActionWidthInitializedRef = ref(false);
-const moreActionWidth = 100;
-
-const onResize = (size) => {
-  if (Tools.isUndefinedOrNull(titleContainerRef.value) || Tools.isUndefinedOrNull(actionContainerRef.value)) {
-    return;
-  }
-
-  if (!isActionWidthInitializedRef.value) {
-    const nodes = actionContainerRef.value.getElementsByClassName('class-action-item');
-    for (let i = 0; i < actions.length; i++) {
-      actions[i].width = nodes[i].clientWidth + 10;
-    }
-    isActionWidthInitializedRef.value = true;
-  }
-
-  const _baseActions = [];
-  const _moreActions = [];
-  const length = actions.length;
-  let availableWidth = size.width - titleContainerRef.value.clientWidth;
-  let width = 0;
-  let index = 0;
-
-  for (; index < length; index++) {
-    console.log(index, width + actions[index].width, availableWidth);
-    if (width + actions[index].width > availableWidth) {
-      availableWidth -= moreActionWidth;
-      while (width > availableWidth) {
-        index--;
-        width -= actions[index].width;
-        _baseActions.pop();
-      }
-      break;
-    } else {
-      _baseActions.push(actions[index]);
-      width += actions[index].width;
-    }
-  }
-
-  for (; index < length; index++) {
-    _moreActions.push(actions[index]);
-  }
-
-  baseActions.value = _baseActions;
-  moreActions.value = _moreActions;
-};
-</script>
diff --git a/io.sc.platform.core.frontend/src/views/TreeGrid.vue b/io.sc.platform.core.frontend/src/views/TreeGrid.vue
deleted file mode 100644
index 55ef6444..00000000
--- a/io.sc.platform.core.frontend/src/views/TreeGrid.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<template>
-  <div>
-    <div v-if="executeProgress.show" class="row pt-2">
-      <div class="col-2 pl-4">{{ $t('io.sc.engine.mv.result.task.progress') }}</div>
-      <div class="col-3">
-        <q-linear-progress size="20px" :value="executeProgress.percentage" color="primary" rounded> </q-linear-progress>
-      </div>
-      <div class="col-7 pl-4">{{ executeProgress.message }}</div>
-      <div class="col-1"></div>
-    </div>
-    <w-grid
-      ref="gridRef"
-      :title="$t('menu.engine.mv.result')"
-      :config-button="true"
-      selection="multiple"
-      :checkbox-selection="false"
-      :data-url="Environment.apiContextPath('/api/mv/viewer/result')"
-      :pageable="true"
-      :pagination="{
-        sortBy: 'validateDate',
-        descending: true,
-      }"
-      :toolbar-configure="{ noIcon: false }"
-      :toolbar-actions="[
-        'refresh',
-        'separator',
-        {
-          name: 'execute',
-          label: $t('io.sc.engine.mv.result.grid.toolbar.execute'),
-          icon: 'bi-play-circle',
-          click: () => {
-            executorDialogRef.open();
-          },
-        },
-        'separator',
-        {
-          name: 'detail',
-          label: $t('detail'),
-          icon: 'bi-display',
-          enableIf: (selecteds) => {
-            return selecteds && selecteds.length > 0;
-          },
-          click: (selecteds) => {
-            if (selecteds && selecteds.length > 0) {
-              const selected = selecteds[0];
-              resultDetailDialogRef.open(selected);
-            }
-          },
-        },
-        {
-          extend: 'remove',
-          click: (selecteds) => {
-            if (selecteds && selecteds.length > 0) {
-              const selected = selecteds[0];
-              axios
-                .request({
-                  url: Environment.apiContextPath('/api/mv/viewer/result'),
-                  method: 'delete',
-                  data: [{ validateDate: selected.validateDate, modelId: selected.modelId }],
-                })
-                .then(() => {
-                  gridRef.refresh();
-                });
-            }
-          },
-        },
-        'separator',
-        'view',
-        'separator',
-        'export',
-      ]"
-      :columns="[
-        { width: 150, name: 'validateDate', label: $t('io.sc.engine.mv.result.grid.entity.validateDate') },
-        { width: 150, name: 'modelId', label: $t('io.sc.engine.mv.result.grid.entity.modelId') },
-        { width: 200, name: 'modelName', label: $t('io.sc.engine.mv.result.grid.entity.modelName') },
-        { width: 100, name: 'executeMode', label: $t('io.sc.engine.mv.result.grid.entity.executeMode') },
-        { width: 100, name: 'totalSampleCount', label: $t('io.sc.engine.mv.result.grid.entity.totalSampleCount'), align: 'right' },
-        { width: 100, name: 'defaultSampleCount', label: $t('io.sc.engine.mv.result.grid.entity.defaultSampleCount'), align: 'right' },
-        {
-          width: 900,
-          name: 'discrimination',
-          label: $t('io.sc.engine.mv.result.grid.entity.discrimination'),
-          columns: [
-            {
-              name: 'total',
-              label: $t('io.sc.engine.mv.result.grid.entity.total'),
-              columns: [
-                { width: 100, name: 'auc', label: $t('io.sc.engine.mv.result.grid.entity.auc') },
-                { width: 100, name: 'ar', label: $t('io.sc.engine.mv.result.grid.entity.ar') },
-                { width: 100, name: 'ks', label: $t('io.sc.engine.mv.result.grid.entity.ks') },
-              ],
-            },
-            {
-              name: 'quantitative',
-              label: $t('quantitative'),
-              columns: [
-                { width: 100, name: 'aucQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.auc') },
-                { width: 100, name: 'arQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.ar') },
-                { width: 100, name: 'ksQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.ks') },
-              ],
-            },
-            {
-              name: 'qualitative',
-              label: $t('qualitative'),
-              columns: [
-                { width: 100, name: 'aucQualitative', label: $t('io.sc.engine.mv.result.grid.entity.auc') },
-                { width: 100, name: 'arQualitative', label: $t('io.sc.engine.mv.result.grid.entity.ar') },
-                { width: 100, name: 'ksQualitative', label: $t('io.sc.engine.mv.result.grid.entity.ks') },
-              ],
-            },
-          ],
-        },
-        {
-          width: 200,
-          name: 'stability',
-          label: $t('io.sc.engine.mv.result.grid.entity.stability'),
-          columns: [
-            { width: 100, name: 'svd', label: $t('io.sc.engine.mv.result.grid.entity.svd') },
-            { width: 100, name: 'psi', label: $t('io.sc.engine.mv.result.grid.entity.psi') },
-          ],
-        },
-        {
-          width: 200,
-          name: 'scaleValidate',
-          label: $t('io.sc.engine.mv.result.grid.entity.scaleValidate'),
-          columns: [
-            { width: 100, name: 'chiSquare', label: $t('io.sc.engine.mv.result.grid.entity.chiSquare'), align: 'center', format: passOrNotFormater },
-            { width: 100, name: 'binomial', label: $t('io.sc.engine.mv.result.grid.entity.binomial'), align: 'center', format: passOrNotFormater },
-          ],
-        },
-      ]"
-      :viewer="{
-        panel: {
-          columnNum: 1,
-          fields: [
-            { name: 'validateDate', label: $t('io.sc.engine.mv.result.grid.entity.validateDate') },
-            {
-              name: 'runtimeParameters',
-              label: $t('io.sc.engine.mv.result.grid.entity.runtimeParameters'),
-              format: (value) => {
-                let result = '';
-                for (const item of value) {
-                  result +=
-                    $t('io.sc.engine.mv.result.grid.entity.runtimeParameters.' + item.name) +
-                    ':' +
-                    (Tools.isUndefinedOrNull(item.value) ? '' : item.value) +
-                    '<br/>';
-                }
-                return result;
-              },
-            },
-            { name: 'modelId', label: $t('io.sc.engine.mv.result.grid.entity.modelId') },
-            { name: 'modelName', label: $t('io.sc.engine.mv.result.grid.entity.modelName') },
-            { name: 'executeMode', label: $t('io.sc.engine.mv.result.grid.entity.executeMode') },
-            { name: 'totalSampleCount', label: $t('io.sc.engine.mv.result.grid.entity.totalSampleCount') },
-            { name: 'defaultSampleCount', label: $t('io.sc.engine.mv.result.grid.entity.defaultSampleCount') },
-            { name: 'auc', label: $t('io.sc.engine.mv.result.grid.entity.total.auc') },
-            { name: 'ar', label: $t('io.sc.engine.mv.result.grid.entity.total.ar') },
-            { name: 'ks', label: $t('io.sc.engine.mv.result.grid.entity.total.ks') },
-            { name: 'aucQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.quantitative.auc') },
-            { name: 'arQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.quantitative.ar') },
-            { name: 'ksQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.quantitative.ks') },
-            { name: 'aucQualitative', label: $t('io.sc.engine.mv.result.grid.entity.qualitative.auc') },
-            { name: 'arQualitative', label: $t('io.sc.engine.mv.result.grid.entity.qualitative.ar') },
-            { name: 'ksQualitative', label: $t('io.sc.engine.mv.result.grid.entity.qualitative.ks') },
-            { name: 'svd', label: $t('io.sc.engine.mv.result.grid.entity.svd') },
-            { name: 'psi', label: $t('io.sc.engine.mv.result.grid.entity.psi') },
-            { name: 'chiSquare', label: $t('io.sc.engine.mv.result.grid.entity.chiSquare'), format: Formater.none() },
-            { name: 'binomial', label: $t('io.sc.engine.mv.result.grid.entity.binomial'), format: Formater.none() },
-          ],
-        },
-      }"
-    ></w-grid>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { axios, Environment, Tools, Formater, NotifyManager } from '@/platform';
-
-const gridRef = ref();
-const resultDetailDialogRef = ref();
-const executorDialogRef = ref();
-const executeProgress = reactive({
-  show: false,
-  percentage: 0,
-  message: '',
-});
-let executeProgressInterval;
-
-const passOrNotFormater = (value) => {
-  if (Tools.isUndefinedOrNull(value)) {
-    return '';
-  }
-  if (value === 'PASS') {
-    return {
-      componentType: 'QIcon',
-      attrs: { name: 'bi-check-circle', size: '20px', color: 'green' },
-    };
-  } else {
-    return {
-      componentType: 'QIcon',
-      attrs: { name: 'bi-x-circle', size: '20px', color: 'red' },
-    };
-  }
-};
-
-const afterStartExecute = () => {
-  executeProgress.show = true;
-  executeProgress.percentage = 0;
-  executeProgressInterval = setInterval(() => {
-    axios
-      .get(Environment.apiContextPath('/api/mv/traceExecuteProgress'))
-      .then((response) => {
-        const progressInfo = response.data;
-        executeProgress.percentage = progressInfo.currentWeight / progressInfo.totalWeight;
-        executeProgress.message = progressInfo.messageKey;
-        if (executeProgress.percentage >= 1) {
-          clearInterval(executeProgressInterval);
-          executeProgress.show = false;
-          gridRef.value.refresh();
-        }
-      })
-      .catch(() => {
-        clearInterval(executeProgressInterval);
-        executeProgress.show = false;
-        gridRef.value.refresh();
-      });
-  }, 1000);
-};
-
-axios.get(Environment.apiContextPath('/api/mv/isExistsRunningExecutor')).then((response) => {
-  if (response.data) {
-    afterStartExecute();
-  }
-});
-</script>