From 54eb7ff68c8360c598825771812fa1bd6f0f543a Mon Sep 17 00:00:00 2001
From: likunming <likunming@163.com>
Date: Wed, 23 Oct 2024 11:21:39 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E8=A1=A8=E6=A0=BC=E5=88=86=E5=89=B2?=
 =?UTF-8?q?=E7=BA=BF=E5=85=BC=E5=AE=B9=E5=AE=98=E6=96=B9=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E3=80=82=202=E3=80=81cellEdit=E7=BC=96=E8=BE=91=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3=E4=B8=AD=E4=B8=8D=E8=83=BD=E5=8F=96format=E5=90=8E?=
 =?UTF-8?q?=E7=9A=84=E3=80=82=203=E3=80=81=E7=AA=97=E5=8F=A3setWidth?=
 =?UTF-8?q?=E4=B8=8EsetHeight=E5=AE=9E=E7=8E=B0=E3=80=82=204=E3=80=81?=
 =?UTF-8?q?=E6=9C=AC=E5=9C=B0=E6=A8=A1=E5=BC=8F=E7=AA=97=E5=8F=A3=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E6=8C=89=E9=92=AE=E6=94=B9=E6=88=90=E7=A1=AE=E5=AE=9A?=
 =?UTF-8?q?=E3=80=82=205=E3=80=81removeLocalData=E4=B8=8EupdateLocalData?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=BB=E9=94=AE=E6=A0=A1=E9=AA=8C=E3=80=82?=
 =?UTF-8?q?=206=E3=80=81=E4=BF=AE=E5=A4=8D=E6=89=80=E6=9C=89=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E9=83=BD=E8=A7=A6=E5=8F=91afterEditorOpen=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E9=97=AE=E9=A2=98=E3=80=82=207=E3=80=81=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E9=85=8D=E7=BD=AE=E4=B8=AD=E5=A2=9E=E5=8A=A0=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=88=86=E5=89=B2=E7=BA=BF=E9=85=8D=E7=BD=AE=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../platform/components/dialog/WDialog.vue    |  42 +-
 .../platform/components/grid/CellEditor.vue   |   4 +-
 .../platform/components/grid/GridConfig.vue   | 109 +++-
 .../platform/components/grid/GridEditor.vue   |   4 +-
 .../platform/components/grid/GridHeader.vue   |  53 +-
 .../src/platform/components/grid/GridTd.vue   |   2 +-
 .../src/platform/components/grid/GridTop.vue  |  27 +-
 .../platform/components/grid/TreeGridRow.vue  |  20 +-
 .../src/platform/components/grid/WGrid.vue    |  43 +-
 .../src/platform/components/grid/css/grid.css | 617 +-----------------
 .../components/grid/css/separator.css         |  80 +++
 .../platform/components/grid/css/sticky.css   | 590 +++++++++++++++++
 .../platform/components/toolbar/WToolbar.vue  |  47 +-
 .../src/platform/i18n/messages.json           |   1 +
 .../src/platform/i18n/messages_tw_CN.json     |   1 +
 .../src/platform/i18n/messages_zh_CN.json     |   1 +
 16 files changed, 954 insertions(+), 687 deletions(-)
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/css/separator.css
 create mode 100644 io.sc.platform.core.frontend/src/platform/components/grid/css/sticky.css

diff --git a/io.sc.platform.core.frontend/src/platform/components/dialog/WDialog.vue b/io.sc.platform.core.frontend/src/platform/components/dialog/WDialog.vue
index 98453c16..0273fa04 100644
--- a/io.sc.platform.core.frontend/src/platform/components/dialog/WDialog.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/dialog/WDialog.vue
@@ -15,7 +15,7 @@
     no-refocus
     v-bind="attrs"
   >
-    <q-card :style="generateDialogStyle()">
+    <q-card :style="generateDialogStyle">
       <q-card-section style="height: 59px">
         <div class="flex justify-between">
           <div class="text-h6">{{ titleRef }}</div>
@@ -56,8 +56,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, useAttrs, watch } from 'vue';
+import { ref, reactive, useAttrs, watch, computed } from 'vue';
 import { useQuasar } from 'quasar';
+import { Tools } from '@/platform';
 
 const attrs = useAttrs();
 const props = defineProps({
@@ -88,33 +89,40 @@ watch(
     titleRef.value = newVal;
   },
 );
+const _width = ref('');
+const _height = ref('');
+if (props.width) {
+  _width.value = props.width;
+}
+if (props.height) {
+  _height.value = props.height;
+}
 
 const maximizeBtnClick = () => {
   dialog.maximized = !dialog.maximized;
   emit('maximized', dialog.maximized);
 };
 
-const generateDialogStyle = () => {
+const generateDialogStyle = computed(() => {
   const result = {
     'min-width': '400px',
     'max-width': '100vw',
     'min-height': '50px',
     'max-height': '100vh',
   };
-
   if (dialog.maximized) {
-    result.width = '100vw';
-    result.height = '100vh';
+    result['width'] = '100vw';
+    result['height'] = '100vh';
   } else {
-    if (props.width) {
-      result.width = props.width;
+    if (!Tools.isEmpty(_width.value)) {
+      result['width'] = _width.value;
     }
-    if (props.height) {
-      result.height = props.height;
+    if (!Tools.isEmpty(_height.value)) {
+      result['height'] = _height.value;
     }
   }
   return result;
-};
+});
 
 const generateDialogBodyStyle = () => {
   const result = {
@@ -157,10 +165,18 @@ const setTitle = (title) => {
 };
 
 const setWidth = (width) => {
-  //
+  if (typeof width === 'number') {
+    _width.value = width + 'px';
+  } else {
+    _width.value = width;
+  }
 };
 const setHeight = (height) => {
-  //
+  if (typeof height === 'number') {
+    _height.value = height + 'px';
+  } else {
+    _height.value = height;
+  }
 };
 
 defineExpose({
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/CellEditor.vue b/io.sc.platform.core.frontend/src/platform/components/grid/CellEditor.vue
index a7eceb53..7b05083f 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/CellEditor.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/CellEditor.vue
@@ -47,8 +47,8 @@ const dialog = {
   buttons: [
     {
       icon: 'beenhere',
-      labelI18nKey: 'action.submit',
-      label: t('action.submit'),
+      labelI18nKey: props.grid.props.localMode ? 'action.confirm' : 'action.submit',
+      label: t(props.grid.props.localMode ? 'action.confirm' : 'action.submit'),
       loading: false,
       click: async () => {
         dialog.buttons[0].loading = true;
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 37dcf1cc..9c7bebc9 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
@@ -1,6 +1,6 @@
 <template>
   <q-list padding style="min-width: 250px">
-    <q-item :clickable="false" dense>
+    <q-item :clickable="false">
       <q-item-section>
         <q-item-label>全屏</q-item-label>
       </q-item-section>
@@ -40,8 +40,8 @@
       </q-item-section>
     </q-item>
 
-    <q-separator spaced />
-    <q-item :clickable="false" dense>
+    <q-separator />
+    <q-item :clickable="false">
       <q-item-section>
         <q-item-label>复选框</q-item-label>
       </q-item-section>
@@ -78,8 +78,8 @@
     </q-item>
 
     <template v-if="!grid.props.tree">
-      <q-separator spaced />
-      <q-item :clickable="false" dense>
+      <q-separator />
+      <q-item :clickable="false">
         <q-item-section>
           <q-item-label>序号</q-item-label>
         </q-item-section>
@@ -118,7 +118,47 @@
       </q-item>
     </template>
 
-    <q-separator spaced />
+    <q-separator />
+    <q-expansion-item label="分割线">
+      <q-card>
+        <q-card-section>
+          <q-item v-ripple tag="label" dense>
+            <q-item-section side>
+              <q-checkbox v-model="separatorHorizontal" dense @update:model-value="separatorChange('horizontal', separatorHorizontal)" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>水平</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item v-ripple tag="label" dense>
+            <q-item-section side>
+              <q-checkbox v-model="separatorVertical" dense @update:model-value="separatorChange('vertical', separatorVertical)" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>垂直</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item v-ripple tag="label" dense>
+            <q-item-section side>
+              <q-checkbox v-model="separatorCell" dense @update:model-value="separatorChange('cell', separatorCell)" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>单元格</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item v-ripple tag="label" dense>
+            <q-item-section side>
+              <q-checkbox v-model="separatorNone" dense @update:model-value="separatorChange('none', separatorNone)" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>无</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+      </q-card>
+    </q-expansion-item>
+
+    <q-separator />
     <q-expansion-item label="紧凑模式">
       <q-card>
         <q-card-section>
@@ -166,8 +206,8 @@
       </q-card>
     </q-expansion-item>
 
-    <q-separator spaced />
-    <q-item :clickable="false" dense>
+    <q-separator />
+    <q-item :clickable="false">
       <q-item-section>
         <q-item-label class="nowrap text-nowrap">固定列</q-item-label>
       </q-item-section>
@@ -191,7 +231,7 @@
       </q-item-section>
     </q-item>
 
-    <q-separator spaced />
+    <q-separator />
     <q-item-label header>显示列</q-item-label>
 
     <template v-for="col in table.columns" :key="col.name">
@@ -217,7 +257,7 @@
   </q-list>
 </template>
 <script setup lang="ts">
-import { inject } from 'vue';
+import { inject, ref, watch } from 'vue';
 const props = defineProps({
   scope: {
     type: Object,
@@ -253,6 +293,46 @@ const stickyOptions = [
   { label: '固定9列', value: 9 },
   { label: '固定10列', value: 10 },
 ];
+const separatorHorizontal = ref(false);
+const separatorVertical = ref(false);
+const separatorCell = ref(false);
+const separatorNone = ref(false);
+
+const setSeparatorValue = (value) => {
+  if (value === 'horizontal') {
+    separatorHorizontal.value = true;
+    separatorVertical.value = false;
+    separatorCell.value = false;
+    separatorNone.value = false;
+  } else if (value === 'vertical') {
+    separatorHorizontal.value = false;
+    separatorVertical.value = true;
+    separatorCell.value = false;
+    separatorNone.value = false;
+  } else if (value === 'cell') {
+    separatorHorizontal.value = false;
+    separatorVertical.value = false;
+    separatorCell.value = true;
+    separatorNone.value = false;
+  } else if (value === 'none') {
+    separatorHorizontal.value = false;
+    separatorVertical.value = false;
+    separatorCell.value = false;
+    separatorNone.value = true;
+  }
+};
+
+if (table.separator) {
+  setSeparatorValue(table.separator);
+}
+
+const separatorChange = (separator, value) => {
+  if (!value) {
+    setSeparatorValue(table.separator);
+  } else {
+    table.separator = separator;
+  }
+};
 
 const showColumn = (name) => {
   if (props.moreColumnTitleArray.length > 0) {
@@ -270,6 +350,15 @@ const showColumn = (name) => {
   }
 };
 
+watch(
+  () => table.separator,
+  (newVal, oldVal) => {
+    if (newVal) {
+      setSeparatorValue(newVal);
+    }
+  },
+);
+
 const denseChange = () => {
   props.grid.refreshStyle(0);
 };
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 b9eb4480..491a0c62 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
@@ -153,8 +153,8 @@ const dialog = reactive({
   dialogButtons: [
     {
       icon: 'beenhere',
-      labelI18nKey: 'action.submit',
-      label: t('action.submit'),
+      labelI18nKey: props.grid.props.localMode ? 'action.confirm' : 'action.submit',
+      label: t(props.grid.props.localMode ? 'action.confirm' : 'action.submit'),
       loading: false,
       click: () => {
         save();
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 7725c345..9b935785 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
@@ -7,6 +7,7 @@
         "
         :rowspan="columnTitleState.columnTitleRowNum"
         :style="moreColumnTitleTableSelectionStyle"
+        class="firstColumn"
       >
         <q-checkbox v-model="table.allTicked" flat :dense="props.denseHeader" @update:model-value="allTickedUpdateFun" />
       </q-th>
@@ -14,21 +15,23 @@
         v-else-if="rIndex === 0 && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none"
         :rowspan="columnTitleState.columnTitleRowNum"
         :style="moreColumnTitleTableSelectionStyle"
+        class="firstColumn"
       ></q-th>
       <q-th
         v-if="rIndex === 0 && table.sortNo && !props.grid.props.tree"
         :rowspan="columnTitleState.columnTitleRowNum"
         :style="moreColumnTitleTableSortNoStyle"
+        :class="rowNumIsFirstColumnComputed ? 'firstColumn' : ''"
       >
         {{ $t('rownum') }}
       </q-th>
       <q-th
-        v-for="c in r"
+        v-for="(c, cIndex) in r"
         :key="c.name"
         :rowspan="c.rowspan"
         :colspan="c.colspan"
         :style="thStyleHandler(c, props.scope)"
-        :class="c.classes"
+        :class="c.classes ? c.classes + ' ' + isFirstColumn(c, cIndex) : ' ' + isFirstColumn(c, cIndex)"
         :props="titleScopeHandler(c, props.scope)"
         style="font-weight: bold"
         :title="c.title"
@@ -177,6 +180,52 @@ const moreColumnTitleTableSortNoStyle = computed(() => {
   return 'font-weight: bold;width: 50px;min-width:50px;max-width:50px;';
 });
 
+const rowNumIsFirstColumnComputed = computed(() => {
+  if (props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none) {
+    return false;
+  } else if (table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none) {
+    return false;
+  } else if (table.sortNo && !props.grid.props.tree) {
+    return true;
+  } else {
+    return false;
+  }
+});
+const isFirstColumn = (c, cIndex) => {
+  if (props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none) {
+    return '';
+  } else if (table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none) {
+    return '';
+  } else if (table.sortNo && !props.grid.props.tree) {
+    return '';
+  } else if (isFirstHandle(c)) {
+    return 'firstColumn';
+  } else {
+    return '';
+  }
+};
+const isFirstHandle = (c) => {
+  let isFirst = false;
+  const firstColumn = props.rawColumns[0];
+  if (firstColumn?.name === c['name']) {
+    isFirst = true;
+  } else if (firstColumn?.columns?.length > 0) {
+    isFirst = child(firstColumn.columns, c);
+  }
+  return isFirst;
+};
+const child = (arr, c) => {
+  let isExist = false;
+  arr.forEach((item) => {
+    if (item['name'] === c['name']) {
+      isExist = true;
+    } else if (item.columns?.length > 0) {
+      isExist = child(item.columns, c);
+    }
+  });
+  return isExist;
+};
+
 const allTickedUpdateFun = (value, evt) => {
   if (table.bodyEditStatus === 'none') {
     if (value) {
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridTd.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridTd.vue
index 38d74ff8..c1018d9c 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridTd.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/GridTd.vue
@@ -26,7 +26,7 @@
               rowKey: scope.row[props.rowKeyName],
               primaryKey: scope.row[props.grid.props.primaryKey],
               colName: col['name'],
-              value: value,
+              value: scope.row[col['name']],
             };
           }
         }
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 3d79abc1..1937fe62 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
@@ -339,6 +339,9 @@ const buttonObj = reactive({
     click: () => {
       openEditor(t('action.addNew'), formStatus.add, undefined);
     },
+    afterEditorOpen: () => {
+      props.grid.emit('afterEditorOpen', { grid: props.grid, data: undefined });
+    },
   },
   edit: {
     name: 'edit',
@@ -354,6 +357,9 @@ const buttonObj = reactive({
     click: (args) => {
       edit(args.selected);
     },
+    afterEditorOpen: (args) => {
+      props.grid.emit('afterEditorOpen', { grid: props.grid, data: args.selected });
+    },
   },
   inlineCellEdit: {
     name: 'inlineCellEdit',
@@ -368,13 +374,13 @@ const buttonObj = reactive({
     },
     click: () => {
       if (props.grid.props.selectMode !== selectMode.cell) {
-        NotifyManager.info('非单元格选择模式，无法使用单元格编辑功能');
+        console.warn(`Select mode is not 'cell', Cannot use cell editing function`);
         return false;
       } else if (Object.keys(table.cellSelected).length === 0 || !table.cellSelected['colName']) {
         NotifyManager.info('请选择要编辑的单元格');
         return false;
       } else if (table.columns.findIndex((item) => item['name'] === table.cellSelected['colName'] && item['type']) < 0) {
-        NotifyManager.info('选择的列未配置编辑时使用的组件类型');
+        console.warn(`The column selected is not configured with a component type for editing.`);
         return false;
       }
       table.bodyEditStatus = editStatus.cell;
@@ -393,13 +399,13 @@ const buttonObj = reactive({
     },
     click: () => {
       if (props.grid.props.selectMode !== selectMode.cell) {
-        NotifyManager.info('非单元格选择模式，无法使用单元格编辑功能');
+        console.warn(`Select mode is not 'cell', Cannot use cell editing function`);
         return false;
       } else if (Object.keys(table.cellSelected).length === 0 || !table.cellSelected['colName']) {
         NotifyManager.info('请选择要编辑的单元格');
         return false;
       } else if (table.columns.findIndex((item) => item['name'] === table.cellSelected['colName'] && item['type']) < 0) {
-        NotifyManager.info('选择的列未配置编辑时使用的组件类型');
+        console.warn(`The column selected is not configured with a component type for editing.`);
         return false;
       }
       // 弹出模态框编辑，但是只编辑该列的值
@@ -419,7 +425,7 @@ const buttonObj = reactive({
     },
     click: () => {
       if (table.columns.findIndex((item) => item['type']) < 0) {
-        NotifyManager.info('未配置编辑时使用的组件类型');
+        console.warn(`Not configured with a component type for editing.`);
         return false;
       }
       table.bodyEditStatus = editStatus.row;
@@ -432,7 +438,7 @@ const buttonObj = reactive({
     label: t('action.edit'),
     click: () => {
       if (table.columns.findIndex((item) => item['type']) < 0) {
-        NotifyManager.info('未配置编辑时使用的组件类型');
+        console.warn(`Not configured with a component type for editing.`);
         return false;
       }
       table.bodyEditStatus = editStatus.rows;
@@ -456,6 +462,9 @@ const buttonObj = reactive({
     click: () => {
       clone(props.grid.getSelectedRow());
     },
+    afterEditorOpen: (args) => {
+      props.grid.emit('afterEditorOpen', { grid: props.grid, data: args.selected });
+    },
   },
   remove: {
     name: 'remove',
@@ -546,6 +555,9 @@ const buttonObj = reactive({
     click: () => {
       openEditor(t('action.addTop'), formStatus.addTop, undefined);
     },
+    afterEditorOpen: () => {
+      props.grid.emit('afterEditorOpen', { grid: props.grid, data: undefined });
+    },
   },
   addChild: {
     name: 'addChild',
@@ -561,6 +573,9 @@ const buttonObj = reactive({
     click: () => {
       openEditor(t('action.addChild'), formStatus.addChild, undefined);
     },
+    afterEditorOpen: () => {
+      props.grid.emit('afterEditorOpen', { grid: props.grid, data: undefined });
+    },
   },
   expand: {
     name: 'expand',
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 bef6eb0e..366f6fa6 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
@@ -33,7 +33,7 @@
               rowKey: props.row[props.rowKey],
               primaryKey: props.row[props.grid.props.primaryKey],
               colName: cols[0]['name'],
-              value: cols[0]['value'],
+              value: props.row[cols[0]['name']],
             };
           }
         }
@@ -140,7 +140,7 @@
                 rowKey: props.row[props.rowKey],
                 primaryKey: props.row[props.grid.props.primaryKey],
                 colName: col['name'],
-                value: col['value'],
+                value: props.row[col['name']],
               };
             }
           }
@@ -158,7 +158,7 @@
             <component
               :is="col.type"
               :ref="(el) => setComponentRef(el, props.row, col)"
-              v-bind="col.attrs"
+              v-bind="componentAttrs(col)"
               v-model="props.getRow(table.rows, props.row[props.rowKey], false)[col.name]"
               bg-color="light-green-1"
             ></component>
@@ -167,7 +167,7 @@
             <component
               :is="col.type"
               :ref="(el) => setComponentRef(el, props.row, col)"
-              v-bind="col.attrs"
+              v-bind="componentAttrs(col)"
               v-model="props.getRow(table.rows, props.row[props.rowKey], false)['_rowOldValue'][col.name]"
               bg-color="light-green-1"
             ></component>
@@ -425,6 +425,18 @@ const iconComputed = computed(() => {
   }
 });
 
+const componentAttrs = (col) => {
+  if (col.attrs) {
+    return col.attrs;
+  } else if (props.grid.props.editor?.form?.fields) {
+    const field = props.grid.props.editor.form.fields.find((item) => item['name'] === col.name);
+    if (field) {
+      return { ...field, label: undefined };
+    }
+  }
+  return undefined;
+};
+
 // 展开/收缩按钮触发事件
 const expandFun = (row) => {
   if (table.bodyEditStatus === 'none') {
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 e231e87a..90246d4a 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
@@ -10,14 +10,15 @@
       :hide-no-data="true"
       :loading-label="$t('tip.dataLoading')"
       v-bind="attrs"
+      :separator="table.separator"
       :selection="selectionComputed"
-      separator="cell"
       :rows="table.rows"
       :columns="columnsComputed"
       :rows-per-page-options="pageable && !props.localMode && !tree && state.refHeightWidth.middleWidth > 600 ? state.pagination.rowsPerPageOptions : []"
       :loading="state.loading"
       :class="tableClassComputed"
       :table-style="tableHeightComputed"
+      card-container-class="card-container-class3333"
       :row-key="rowKey_"
       :visible-columns="visibleColumnsComputed"
       :hide-bottom="pageable && !props.localMode && !tree ? false : true"
@@ -182,6 +183,7 @@ const props = defineProps({
   foreignKey: { type: String, default: 'parent' }, // 数据外键（常规表格模式时，该字段暂时无用，将来可用作多个表格的数据关系字段。树形表格模式时，该字段为构建树数据的关系字段）
   refreshData: { type: Boolean, default: false }, // 新增、删除、修改成功后是否刷新数据列表，默认不刷新但是新增修改后台必须返回对应的行数据对象，删除则必须返回删除的记录集primaryKey集合。
   dbClickOperation: { type: String, default: 'view' }, // 默认的双击操作：可填写内置或自定义按钮name，执行的操作为按钮对应的click，固定值提供：expand(展开双击的行)、none(双击不执行任何动作)
+  separator: { type: String, default: 'horizontal' },
   groupMode: { type: String, default: '' },
   group: {
     type: Array,
@@ -381,6 +383,7 @@ eventBus.on('onLocaleChanged', (local) => {
 });
 
 const table = reactive({
+  separator: props.separator,
   dragRecords: [],
   dragRow: {},
   tickedField: props.tickedField,
@@ -1001,7 +1004,7 @@ watchEffect(() => {
 });
 
 const tableClassComputed = computed(() => {
-  const classArr = <string[]>['sticky-header-column-table'];
+  const classArr = <string[]>['sticky-header-column-table', 'w-grid'];
   if (table.stickyNum && table.stickyNum > 0) {
     if (headerRef.value?.getColumnTitleState()?.columnTitleRowNum > 1) {
       // 存在多行列头
@@ -1087,19 +1090,42 @@ 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);
+      getGridRowsKeyIsEmptyError(item);
+      const row = getRow(
+        table.rows,
+        typeof item === 'object' ? item[props.primaryKey] || item[rowKey_] : item,
+        false,
+        item[props.primaryKey] ? props.primaryKey : rowKey_,
+      );
       if (row) {
         result.push(row);
+      } else {
+        getGridRowsKeyNotExistError(typeof item === 'object' ? item[props.primaryKey] || item[rowKey_] : item);
       }
     });
   } else if (!Tools.isEmpty(target)) {
-    const row = getRow(table.rows, typeof target === 'object' ? target[props.primaryKey] : target, false, props.primaryKey);
+    const row = getRow(
+      table.rows,
+      typeof target === 'object' ? target[props.primaryKey] : target,
+      false,
+      target[props.primaryKey] ? target.primaryKey : rowKey_,
+    );
     if (row) {
       result.push(row);
+    } else {
+      getGridRowsKeyNotExistError(typeof target === 'object' ? target[props.primaryKey] || target[rowKey_] : target);
     }
   }
   return result;
 };
+const getGridRowsKeyIsEmptyError = (data) => {
+  if (typeof data === 'object' && Tools.isEmpty(data[props.primaryKey]) && Tools.isEmpty(data[rowKey_])) {
+    throw new Error('Data does not contain `primaryKey` or `rowKey`.');
+  }
+};
+const getGridRowsKeyNotExistError = (data) => {
+  throw new Error('`' + data + '` Not Found in Data Row.');
+};
 
 // =========获取数据相关API=========start
 /**
@@ -1458,12 +1484,19 @@ const replaceRowHandler = (arr, row, columnName) => {
 const updateLocalData = (data, columnName = '') => {
   if (data && Array.isArray(data)) {
     data.forEach((item) => {
+      updateLocalDataError(columnName, item);
       replaceRowHandler(table.rows, item, columnName);
     });
   } else if (data) {
+    updateLocalDataError(columnName, data);
     replaceRowHandler(table.rows, data, columnName);
   }
 };
+const updateLocalDataError = (columnName, data) => {
+  if (Tools.isEmpty(columnName) && Tools.isEmpty(data[props.primaryKey]) && Tools.isEmpty(data[rowKey_])) {
+    throw new Error('Data does not contain `primaryKey` or `rowKey`.');
+  }
+};
 const removeTreeRows = (arr, row) => {
   arr.forEach((item, index) => {
     if (row[props.primaryKey] === item[props.primaryKey] || row[rowDataExtraPropertyName.rowKey] === item[rowDataExtraPropertyName.rowKey]) {
@@ -1810,4 +1843,6 @@ VueTools.expose2Instance(instance);
 
 <style lang="css">
 @import './css/grid.css';
+@import './css/sticky.css';
+@import './css/separator.css';
 </style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/css/grid.css b/io.sc.platform.core.frontend/src/platform/components/grid/css/grid.css
index a6966c06..891a9171 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/css/grid.css
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/css/grid.css
@@ -9,25 +9,19 @@
 }
 .w-grid .q-table__middle .q-table th {
   padding: var(--tableHeaderPadding) 8px;
-  border-left-width: 0px;
-  border-right-width: 1px;
-  border-top-width: 0px;
-  border-bottom-width: 1px;
-}
-.w-grid .q-table__middle .q-table th:last-child {
-  border-right-width: 0px;
 }
 .w-grid .q-table__middle .q-table td {
   height: var(--tableBodyHeight);
   padding: var(--tableBodyPadding) 8px;
-  border-left-width: 0px;
+}
+.w-grid .q-table__card .q-table__middle {
+  border-color: rgba(0, 0, 0, 0.12);
+  border-style: solid;
+  border-top-width: 1px;
+  border-left-width: 1px;
   border-right-width: 1px;
-  border-top-width: 0px;
   border-bottom-width: 1px;
 }
-.w-grid .q-table__middle .q-table td:last-child {
-  border-right-width: 0px;
-}
 .w-grid .q-table__bottom {
   min-height: var(--tableBottomHeight);
   border-color: rgba(0, 0, 0, 0.12);
@@ -50,602 +44,3 @@
 .w-grid .q-table__control .q-field__control .q-field__marginal {
   height: var(--tableBottomButtonHeight) !important;
 }
-.w-grid .q-table__card .q-table__middle {
-  border-color: rgba(0, 0, 0, 0.12);
-  border-style: solid;
-  border-left-width: 1px;
-  border-right-width: 1px;
-  border-bottom-width: 1px;
-}
-
-.sticky-header-column-table thead tr:not(.noDataTr) {
-  height: var(--tableColumnTitleHeight) !important;
-}
-
-/** 表格所有th固定、设置默认index、背景设置 */
-.sticky-header-column-table tr th {
-  position: sticky;
-  z-index: 2;
-  background: var(--tableHeadBgColor);
-}
-
-/** 固定表头后，修改top距离  */
-.sticky-header-column-table thead {
-  position: sticky;
-  z-index: 2;
-  top: 0;
-}
-
-.sticky-header-column-table-tr-1-1 tr:first-child th:first-child {
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-1-2 tr:first-child th:nth-child(2) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-1-2-rb tr:first-child th:nth-child(2) {
-  border-right-width: 1px;
-}
-.sticky-header-column-table-tr-1-3 tr:first-child th:nth-child(3) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-1-4 tr:first-child th:nth-child(4) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-1-5 tr:first-child th:nth-child(5) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-1-6 tr:first-child th:nth-child(6) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-1-7 tr:first-child th:nth-child(7) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-1-8 tr:first-child th:nth-child(8) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-1-9 tr:first-child th:nth-child(9) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-1-10 tr:first-child th:nth-child(10) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-2-1 tr:nth-child(2) th:first-child {
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-2-2 tr:nth-child(2) th:nth-child(2) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-2-3 tr:nth-child(2) th:nth-child(3) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-2-4 tr:nth-child(2) th:nth-child(4) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-2-5 tr:nth-child(2) th:nth-child(5) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-2-6 tr:nth-child(2) th:nth-child(6) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-2-7 tr:nth-child(2) th:nth-child(7) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-2-8 tr:nth-child(2) th:nth-child(8) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-2-9 tr:nth-child(2) th:nth-child(9) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-2-10 tr:nth-child(2) th:nth-child(10) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-3-1 tr:nth-child(3) th:first-child {
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-3-2 tr:nth-child(3) th:nth-child(2) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-3-3 tr:nth-child(3) th:nth-child(3) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-3-4 tr:nth-child(3) th:nth-child(4) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-3-5 tr:nth-child(3) th:nth-child(5) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-3-6 tr:nth-child(3) th:nth-child(6) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-3-7 tr:nth-child(3) th:nth-child(7) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-3-8 tr:nth-child(3) th:nth-child(8) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-3-9 tr:nth-child(3) th:nth-child(9) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-3-10 tr:nth-child(3) th:nth-child(10) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-4-1 tr:nth-child(4) th:first-child {
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-4-2 tr:nth-child(4) th:nth-child(2) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-4-3 tr:nth-child(4) th:nth-child(3) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-4-4 tr:nth-child(4) th:nth-child(4) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-4-5 tr:nth-child(4) th:nth-child(5) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-4-6 tr:nth-child(4) th:nth-child(6) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-4-7 tr:nth-child(4) th:nth-child(7) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-4-8 tr:nth-child(4) th:nth-child(8) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-4-9 tr:nth-child(4) th:nth-child(9) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-4-10 tr:nth-child(4) th:nth-child(10) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-5-1 tr:nth-child(5) th:first-child {
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-5-2 tr:nth-child(5) th:nth-child(2) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-5-3 tr:nth-child(5) th:nth-child(3) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-5-4 tr:nth-child(5) th:nth-child(4) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-5-5 tr:nth-child(5) th:nth-child(5) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-5-6 tr:nth-child(5) th:nth-child(6) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-5-7 tr:nth-child(5) th:nth-child(7) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-5-8 tr:nth-child(5) th:nth-child(8) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-5-9 tr:nth-child(5) th:nth-child(9) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-5-10 tr:nth-child(5) th:nth-child(10) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-6-1 tr:nth-child(6) th:first-child {
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-6-2 tr:nth-child(6) th:nth-child(2) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-6-3 tr:nth-child(6) th:nth-child(3) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-6-4 tr:nth-child(6) th:nth-child(4) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-6-5 tr:nth-child(6) th:nth-child(5) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-6-6 tr:nth-child(6) th:nth-child(6) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-6-7 tr:nth-child(6) th:nth-child(7) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-6-8 tr:nth-child(6) th:nth-child(8) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-6-9 tr:nth-child(6) th:nth-child(9) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-6-10 tr:nth-child(6) th:nth-child(10) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-7-1 tr:nth-child(7) th:first-child {
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-7-2 tr:nth-child(7) th:nth-child(2) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-7-3 tr:nth-child(7) th:nth-child(3) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-7-4 tr:nth-child(7) th:nth-child(4) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-7-5 tr:nth-child(7) th:nth-child(5) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-7-6 tr:nth-child(7) th:nth-child(6) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-7-7 tr:nth-child(7) th:nth-child(7) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-7-8 tr:nth-child(7) th:nth-child(8) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-7-9 tr:nth-child(7) th:nth-child(9) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-7-10 tr:nth-child(7) th:nth-child(10) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-8-1 tr:nth-child(8) th:first-child {
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-8-2 tr:nth-child(8) th:nth-child(2) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-8-3 tr:nth-child(8) th:nth-child(3) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-8-4 tr:nth-child(8) th:nth-child(4) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-8-5 tr:nth-child(8) th:nth-child(5) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-8-6 tr:nth-child(8) th:nth-child(6) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-8-7 tr:nth-child(8) th:nth-child(7) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-8-8 tr:nth-child(8) th:nth-child(8) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-8-9 tr:nth-child(8) th:nth-child(9) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-8-10 tr:nth-child(8) th:nth-child(10) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-9-1 tr:nth-child(9) th:first-child {
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-9-2 tr:nth-child(9) th:nth-child(2) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-9-3 tr:nth-child(9) th:nth-child(3) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-9-4 tr:nth-child(9) th:nth-child(4) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-9-5 tr:nth-child(9) th:nth-child(5) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-9-6 tr:nth-child(9) th:nth-child(6) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-9-7 tr:nth-child(9) th:nth-child(7) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-9-8 tr:nth-child(9) th:nth-child(8) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-9-9 tr:nth-child(9) th:nth-child(9) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-9-10 tr:nth-child(9) th:nth-child(10) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-tr-10-1 tr:nth-child(10) th:first-child {
-  z-index: 3;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-tr-10-2 tr:nth-child(10) th:nth-child(2) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-tr-10-3 tr:nth-child(10) th:nth-child(3) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-tr-10-4 tr:nth-child(10) th:nth-child(4) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-tr-10-5 tr:nth-child(10) th:nth-child(5) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-tr-10-6 tr:nth-child(10) th:nth-child(6) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-tr-10-7 tr:nth-child(10) th:nth-child(7) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-tr-10-8 tr:nth-child(10) th:nth-child(8) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-tr-10-9 tr:nth-child(10) th:nth-child(9) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-tr-10-10 tr:nth-child(10) th:nth-child(10) {
-  z-index: 3;
-  position: sticky;
-  left: var(--column9Width);
-}
-
-.sticky-header-column-table-td-1 td:first-child {
-  background-color: var(--stickyBgColor);
-  z-index: 1;
-  position: sticky;
-  left: 0px;
-}
-.sticky-header-column-table-td-2 td:nth-child(2) {
-  background-color: var(--stickyBgColor);
-  z-index: 1;
-  position: sticky;
-  left: var(--column1Width);
-}
-.sticky-header-column-table-td-3 td:nth-child(3) {
-  background-color: var(--stickyBgColor);
-  z-index: 1;
-  position: sticky;
-  left: var(--column2Width);
-}
-.sticky-header-column-table-td-4 td:nth-child(4) {
-  background-color: var(--stickyBgColor);
-  z-index: 1;
-  position: sticky;
-  left: var(--column3Width);
-}
-.sticky-header-column-table-td-5 td:nth-child(5) {
-  background-color: var(--stickyBgColor);
-  z-index: 1;
-  position: sticky;
-  left: var(--column4Width);
-}
-.sticky-header-column-table-td-6 td:nth-child(6) {
-  background-color: var(--stickyBgColor);
-  z-index: 1;
-  position: sticky;
-  left: var(--column5Width);
-}
-.sticky-header-column-table-td-7 td:nth-child(7) {
-  background-color: var(--stickyBgColor);
-  z-index: 1;
-  position: sticky;
-  left: var(--column6Width);
-}
-.sticky-header-column-table-td-8 td:nth-child(8) {
-  background-color: var(--stickyBgColor);
-  z-index: 1;
-  position: sticky;
-  left: var(--column7Width);
-}
-.sticky-header-column-table-td-9 td:nth-child(9) {
-  background-color: var(--stickyBgColor);
-  z-index: 1;
-  position: sticky;
-  left: var(--column8Width);
-}
-.sticky-header-column-table-td-10 td:nth-child(10) {
-  background-color: var(--stickyBgColor);
-  z-index: 1;
-  position: sticky;
-  left: var(--column9Width);
-}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/css/separator.css b/io.sc.platform.core.frontend/src/platform/components/grid/css/separator.css
new file mode 100644
index 00000000..c61e53f1
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/css/separator.css
@@ -0,0 +1,80 @@
+/*
+* horizontal
+* 所有包含rowspan=1的表头底部设置为0
+*/
+.w-grid .q-table--horizontal-separator thead tr th[rowspan="1"] {
+  border-bottom-width: 0px;
+}
+/*
+* horizontal
+* 最后一行表头包含rowspan=1的表头底部设置为1
+*/
+.w-grid .q-table--horizontal-separator thead tr:last-child th[rowspan="1"] {
+  border-bottom-width: 1px;
+}
+/*
+* horizontal
+* 数据最后一行底部边框
+*/
+.w-grid .q-table--horizontal-separator tbody tr:last-child td {
+  border-bottom-width: 1px;
+}
+
+
+/*
+* vertical
+* top底部边框
+*/
+.w-grid .q-table--vertical-separator .q-table__top {
+  border-bottom-width: 0px;
+}
+/*
+* vertical
+* 表头底部边框
+*/
+.w-grid .q-table--vertical-separator thead tr th {
+  border-bottom-width: 1px;
+}
+/*
+* vertical
+* 多表头左侧边框
+*/
+.w-grid .q-table--vertical-separator th {
+  border-left: 1px solid rgba(0, 0, 0, 0.12);
+}
+.w-grid .q-table--vertical-separator th:first-child.firstColumn {
+  border-left: 0;
+}
+/*
+* vertical
+* 数据最后一行底部边框
+*/
+.w-grid .q-table--vertical-separator tbody tr:last-child td {
+  border-bottom-width: 1px;
+}
+
+
+/*
+* cell
+* top底部边框
+*/
+.w-grid .q-table--cell-separator .q-table__top {
+  border-bottom-width: 0px;
+}
+/*
+* cell
+* 多表头左侧边框
+*/
+.w-grid .q-table--cell-separator th {
+  border-left: 1px solid rgba(0, 0, 0, 0.12);
+}
+.w-grid .q-table--cell-separator th:first-child.firstColumn {
+  border-left: 0;
+}
+/*
+* cell
+* 数据最后一行底部边框
+*/
+.w-grid .q-table--cell-separator tbody tr:last-child td {
+  border-bottom-width: 1px;
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/css/sticky.css b/io.sc.platform.core.frontend/src/platform/components/grid/css/sticky.css
new file mode 100644
index 00000000..4f969be2
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/css/sticky.css
@@ -0,0 +1,590 @@
+.sticky-header-column-table thead tr:not(.noDataTr) {
+  height: var(--tableColumnTitleHeight) !important;
+}
+/** 表格所有th固定、设置默认index、背景设置 */
+.sticky-header-column-table tr th {
+  position: sticky;
+  z-index: 2;
+  background: var(--tableHeadBgColor);
+}
+
+/** 固定表头后，修改top距离  */
+.sticky-header-column-table thead {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+}
+
+.sticky-header-column-table-tr-1-1 tr:first-child th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-1-2 tr:first-child th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-1-2-rb tr:first-child th:nth-child(2) {
+  border-right-width: 1px;
+}
+.sticky-header-column-table-tr-1-3 tr:first-child th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-1-4 tr:first-child th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-1-5 tr:first-child th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-1-6 tr:first-child th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-1-7 tr:first-child th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-1-8 tr:first-child th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-1-9 tr:first-child th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-1-10 tr:first-child th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-2-1 tr:nth-child(2) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-2-2 tr:nth-child(2) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-2-3 tr:nth-child(2) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-2-4 tr:nth-child(2) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-2-5 tr:nth-child(2) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-2-6 tr:nth-child(2) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-2-7 tr:nth-child(2) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-2-8 tr:nth-child(2) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-2-9 tr:nth-child(2) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-2-10 tr:nth-child(2) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-3-1 tr:nth-child(3) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-3-2 tr:nth-child(3) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-3-3 tr:nth-child(3) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-3-4 tr:nth-child(3) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-3-5 tr:nth-child(3) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-3-6 tr:nth-child(3) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-3-7 tr:nth-child(3) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-3-8 tr:nth-child(3) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-3-9 tr:nth-child(3) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-3-10 tr:nth-child(3) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-4-1 tr:nth-child(4) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-4-2 tr:nth-child(4) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-4-3 tr:nth-child(4) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-4-4 tr:nth-child(4) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-4-5 tr:nth-child(4) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-4-6 tr:nth-child(4) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-4-7 tr:nth-child(4) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-4-8 tr:nth-child(4) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-4-9 tr:nth-child(4) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-4-10 tr:nth-child(4) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-5-1 tr:nth-child(5) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-5-2 tr:nth-child(5) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-5-3 tr:nth-child(5) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-5-4 tr:nth-child(5) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-5-5 tr:nth-child(5) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-5-6 tr:nth-child(5) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-5-7 tr:nth-child(5) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-5-8 tr:nth-child(5) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-5-9 tr:nth-child(5) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-5-10 tr:nth-child(5) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-6-1 tr:nth-child(6) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-6-2 tr:nth-child(6) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-6-3 tr:nth-child(6) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-6-4 tr:nth-child(6) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-6-5 tr:nth-child(6) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-6-6 tr:nth-child(6) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-6-7 tr:nth-child(6) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-6-8 tr:nth-child(6) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-6-9 tr:nth-child(6) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-6-10 tr:nth-child(6) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-7-1 tr:nth-child(7) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-7-2 tr:nth-child(7) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-7-3 tr:nth-child(7) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-7-4 tr:nth-child(7) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-7-5 tr:nth-child(7) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-7-6 tr:nth-child(7) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-7-7 tr:nth-child(7) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-7-8 tr:nth-child(7) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-7-9 tr:nth-child(7) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-7-10 tr:nth-child(7) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-8-1 tr:nth-child(8) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-8-2 tr:nth-child(8) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-8-3 tr:nth-child(8) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-8-4 tr:nth-child(8) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-8-5 tr:nth-child(8) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-8-6 tr:nth-child(8) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-8-7 tr:nth-child(8) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-8-8 tr:nth-child(8) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-8-9 tr:nth-child(8) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-8-10 tr:nth-child(8) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-9-1 tr:nth-child(9) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-9-2 tr:nth-child(9) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-9-3 tr:nth-child(9) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-9-4 tr:nth-child(9) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-9-5 tr:nth-child(9) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-9-6 tr:nth-child(9) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-9-7 tr:nth-child(9) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-9-8 tr:nth-child(9) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-9-9 tr:nth-child(9) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-9-10 tr:nth-child(9) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-tr-10-1 tr:nth-child(10) th:first-child {
+  z-index: 3;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-tr-10-2 tr:nth-child(10) th:nth-child(2) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-tr-10-3 tr:nth-child(10) th:nth-child(3) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-tr-10-4 tr:nth-child(10) th:nth-child(4) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-tr-10-5 tr:nth-child(10) th:nth-child(5) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-tr-10-6 tr:nth-child(10) th:nth-child(6) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-tr-10-7 tr:nth-child(10) th:nth-child(7) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-tr-10-8 tr:nth-child(10) th:nth-child(8) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-tr-10-9 tr:nth-child(10) th:nth-child(9) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-tr-10-10 tr:nth-child(10) th:nth-child(10) {
+  z-index: 3;
+  position: sticky;
+  left: var(--column9Width);
+}
+
+.sticky-header-column-table-td-1 td:first-child {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: 0px;
+}
+.sticky-header-column-table-td-2 td:nth-child(2) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column1Width);
+}
+.sticky-header-column-table-td-3 td:nth-child(3) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column2Width);
+}
+.sticky-header-column-table-td-4 td:nth-child(4) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column3Width);
+}
+.sticky-header-column-table-td-5 td:nth-child(5) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column4Width);
+}
+.sticky-header-column-table-td-6 td:nth-child(6) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column5Width);
+}
+.sticky-header-column-table-td-7 td:nth-child(7) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column6Width);
+}
+.sticky-header-column-table-td-8 td:nth-child(8) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column7Width);
+}
+.sticky-header-column-table-td-9 td:nth-child(9) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column8Width);
+}
+.sticky-header-column-table-td-10 td:nth-child(10) {
+  background-color: var(--stickyBgColor);
+  z-index: 1;
+  position: sticky;
+  left: var(--column9Width);
+}
\ No newline at end of file
diff --git a/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
index 45aa0515..6f64f5a7 100644
--- a/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
@@ -450,48 +450,31 @@ const firstTickedComputed = computed(() => {
 const tickedComputed = computed(() => {
   return Object.keys(props.grid).length > 0 ? props.grid.getTickedRows() : [];
 });
+
 const buttonClick = async (button) => {
   let beforeResult = true;
   const context = {};
+  const args = {
+    selected: firstSelectedComputed.value,
+    selecteds: selectedComputed.value,
+    ticked: firstTickedComputed.value,
+    tickeds: tickedComputed.value,
+    grid: props.grid,
+    context: context,
+    selectedColName: props.grid.getSelectedCell()['colName'],
+  };
   if (button.beforeClick) {
-    beforeResult = await button.beforeClick({
-      selected: firstSelectedComputed.value,
-      selecteds: selectedComputed.value,
-      ticked: firstTickedComputed.value,
-      tickeds: tickedComputed.value,
-      grid: props.grid,
-      context: context,
-      selectedColName: props.grid.getSelectedCell()['colName'],
-    });
+    beforeResult = await button.beforeClick(args);
   }
   if (beforeResult && button.click) {
-    await button.click({
-      selected: firstSelectedComputed.value,
-      selecteds: selectedComputed.value,
-      ticked: firstTickedComputed.value,
-      tickeds: tickedComputed.value,
-      grid: props.grid,
-      _click: button._click,
-      context: context,
-      selectedColName: props.grid.getSelectedCell()['colName'],
-    });
+    await button.click({ ...args, _click: button._click });
     nextTick(async () => {
       if (button.afterClick) {
-        await button.afterClick({
-          selected: firstSelectedComputed.value,
-          selecteds: selectedComputed.value,
-          ticked: firstTickedComputed.value,
-          tickeds: tickedComputed.value,
-          grid: props.grid,
-          context: context,
-          selectedColName: props.grid.getSelectedCell()['colName'],
-        });
+        await button.afterClick(args);
       }
-      let data = undefined;
-      if (button?.name !== 'add' && button?.name !== 'addTop' && button?.name !== 'addChild') {
-        data = firstSelectedComputed.value;
+      if (button.afterEditorOpen) {
+        button.afterEditorOpen(args);
       }
-      props.grid.emit('afterEditorOpen', { grid: props.grid, data: data });
     });
   }
 };
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages.json b/io.sc.platform.core.frontend/src/platform/i18n/messages.json
index 1e09da16..b77270c7 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages.json
@@ -142,6 +142,7 @@
   "action.export": "Export",
   "action.export.failed": "Export Failed",
   "action.submit": "Submit",
+  "action.confirm": "Confirm",
   "action.expandAll": "Expand All",
   "action.collapseAll": "Collapse All",
 
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json b/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
index 0e83daa2..98666918 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
@@ -142,6 +142,7 @@
   "action.export": "導出",
   "action.export.failed": "導出失敗",
   "action.submit": "提交",
+  "action.confirm": "确定",
   "action.expandAll": "全部展开",
   "action.collapseAll": "全部收起",
 
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json b/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
index cc881858..a1574405 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
@@ -142,6 +142,7 @@
   "action.export": "导出",
   "action.export.failed": "导出失败",
   "action.submit": "提交",
+  "action.confirm": "确定",
   "action.expandAll": "全部展开",
   "action.collapseAll": "全部收起",