From ff4560ae5c9caf935b0791a21a928b22c4a5c7ac Mon Sep 17 00:00:00 2001
From: likunming <likunming@163.com>
Date: Mon, 21 Oct 2024 14:28:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../platform/components/dialog/WDialog.vue    |  2 +-
 .../src/platform/components/grid/GridBody.vue |  8 ++--
 .../platform/components/grid/GridEditor.vue   |  2 +-
 .../platform/components/grid/GridHeader.vue   | 14 +++---
 .../src/platform/components/grid/GridTd.vue   | 39 ++++++++--------
 .../src/platform/components/grid/GridTop.vue  | 27 +++++------
 .../platform/components/grid/TreeGridRow.vue  | 45 ++++++++-----------
 .../src/platform/components/grid/WGrid.vue    | 16 +++----
 .../src/platform/components/grid/css/grid.css |  6 +--
 .../src/platform/components/grid/ts/grid.ts   |  2 +-
 10 files changed, 73 insertions(+), 88 deletions(-)

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 bd58ccab..98453c16 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
@@ -18,7 +18,7 @@
     <q-card :style="generateDialogStyle()">
       <q-card-section style="height: 59px">
         <div class="flex justify-between">
-          <div class="text-h6">{{ title }}</div>
+          <div class="text-h6">{{ titleRef }}</div>
           <div class="flex justify-end gap-4">
             <template v-if="buttons && buttons.length > 0">
               <template v-for="(btn, index) in buttons as any" :key="index">
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue b/io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue
index 0cfa2abb..2a6ec4ba 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/GridBody.vue
@@ -22,8 +22,8 @@
   <template v-else>
     <q-tr
       ref="trRef"
-      :no-hover="props.grid.props.selectedMode === selectedMode.row ? false : true"
-      :class="props.scope.row[table.selectedField] && props.grid.props.selectedMode === selectedMode.row ? 'selected' : ''"
+      :no-hover="props.grid.props.selectMode === selectMode.row ? false : true"
+      :class="props.scope.row[table.selectedField] && props.grid.props.selectMode === selectMode.row ? 'selected' : ''"
       :props="props.scope"
       :draggable="draggableComputed"
       @click.stop="props.rowClick($event, scope.row, scope.rowIndex)"
@@ -33,7 +33,7 @@
       @drop="draggableComputed ? onDrop($event, scope) : () => {}"
       @dragstart="draggableComputed ? onDragStart($event, scope) : () => {}"
     >
-      <q-td v-if="table.checkboxSelection && props.grid.props.selectedMode !== selectedMode.none" class="text-center" style="padding: 0; width: 50px">
+      <q-td v-if="table.checkboxSelection && props.grid.props.selectMode !== selectMode.none" class="text-center" style="padding: 0; width: 50px">
         <q-checkbox
           v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)[table.tickedField]"
           flat
@@ -70,7 +70,7 @@
 <script setup lang="ts">
 import { computed, inject, ref, toRaw } from 'vue';
 import { Tools, noErrorAxios, NotifyManager, t } from '@/platform';
-import { dndMode, dndImage, selectedMode, editStatus } from './ts/grid';
+import { dndMode, dndImage, selectMode, editStatus } from './ts/grid';
 import TreeGridRow from './TreeGridRow.vue';
 import GridTd from './GridTd.vue';
 import GridEditToolbar from './GridEditToolbar.vue';
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 e7e7cfdf..b9eb4480 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
@@ -1,5 +1,5 @@
 <template>
-  <w-dialog ref="dialogRef" :title="dialog.dialogTitle" v-bind="props.grid.props.editor.dialog" :buttons="dialogButtonsComputed">
+  <w-dialog ref="dialogRef" v-bind="props.grid.props.editor.dialog" :title="dialog.dialogTitle" :buttons="dialogButtonsComputed">
     <w-form ref="dialogFormRef" v-bind="props.grid.props.editor.form" class="pt-1.5 px-1.5"></w-form>
   </w-dialog>
 </template>
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 5bc72f5b..7725c345 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
@@ -3,11 +3,7 @@
     <q-tr v-for="(r, rIndex) in columnTitleState.columnTitleArr" :key="rIndex">
       <q-th
         v-if="
-          rIndex === 0 &&
-          props.selection === 'multiple' &&
-          table.checkboxSelection &&
-          !props.grid.props.tree &&
-          props.grid.props.selectedMode !== selectedMode.none
+          rIndex === 0 && props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none
         "
         :rowspan="columnTitleState.columnTitleRowNum"
         :style="moreColumnTitleTableSelectionStyle"
@@ -15,7 +11,7 @@
         <q-checkbox v-model="table.allTicked" flat :dense="props.denseHeader" @update:model-value="allTickedUpdateFun" />
       </q-th>
       <q-th
-        v-else-if="rIndex === 0 && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectedMode !== selectedMode.none"
+        v-else-if="rIndex === 0 && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none"
         :rowspan="columnTitleState.columnTitleRowNum"
         :style="moreColumnTitleTableSelectionStyle"
       ></q-th>
@@ -49,13 +45,13 @@
   <template v-else>
     <q-tr :props="scope">
       <q-th
-        v-if="props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectedMode !== selectedMode.none"
+        v-if="props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none"
         :style="props.grid.props.tree ? '' : 'padding: 0; min-width: 50px;width: 50px;max-width:50px'"
       >
         <q-checkbox v-model="table.allTicked" flat :dense="props.denseHeader" @update:model-value="allTickedUpdateFun"
       /></q-th>
       <q-th
-        v-else-if="table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectedMode !== selectedMode.none"
+        v-else-if="table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectMode !== selectMode.none"
         :style="props.grid.props.tree ? '' : 'padding: 0; min-width: 50px;width: 50px;max-width:50px'"
       ></q-th>
       <template v-for="col in scope.cols" :key="col.name">
@@ -80,7 +76,7 @@
 <script setup lang="ts">
 import { Tools } from '@/platform';
 import { computed, inject, reactive } from 'vue';
-import { selectedMode } from './ts/grid.ts';
+import { selectMode } from './ts/grid.ts';
 
 const props = defineProps({
   grid: {
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 7a9931b7..38d74ff8 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
@@ -5,22 +5,22 @@
       :key="col.name"
       :props="scope"
       :title="titleComputed"
-      :class="props.grid.props.selectedMode === selectedMode.cell && (table.bodyEditStatus === 'none' || props.grid.props.localMode) ? tdClassComputed : ''"
+      :class="props.grid.props.selectMode === selectMode.cell && (table.bodyEditStatus === 'none' || props.grid.props.localMode) ? tdClassComputed : ''"
       :rowspan="rowSpanComputed"
       :style="col.type && table.bodyEditStatus !== 'none' ? 'width: ' + (tdWidth - 24) + 'px;' : ''"
       @click="
         () => {
           // 判定是否要退出编辑模式
-          if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectedMode === selectedMode.cell) {
+          if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectMode === selectMode.cell) {
             if (table['cellSelected']['colName'] !== col['name'] || table['cellSelected']['row'][props.rowKeyName] !== props.scope.row[props.rowKeyName]) {
               table.bodyEditStatus = 'none';
             }
-          } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectedMode === selectedMode.cell) {
+          } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectMode === selectMode.cell) {
             if (table['cellSelected']['row'][props.rowKeyName] !== props.scope.row[props.rowKeyName]) {
               table.bodyEditStatus = 'none';
             }
           }
-          if (table.bodyEditStatus === 'none' && props.grid.props.selectedMode === selectedMode.cell) {
+          if (table.bodyEditStatus === 'none' && props.grid.props.selectMode === selectMode.cell) {
             table['cellSelected'] = {
               row: toRaw(scope.row),
               rowKey: scope.row[props.rowKeyName],
@@ -47,25 +47,16 @@
           <component
             :is="col.type"
             ref="componentRef"
-            v-bind="col.attrs"
+            v-bind="componentAttrs(col)"
             v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)[col.name]"
             bg-color="light-green-1"
-            @blur="
-              () => {
-                if (props.grid.props.selectedMode === selectedMode.cell && table.bodyEditStatus === editStatus.cell) {
-                  // 失去焦点，退出编辑模式
-                  table.bodyEditStatus = editStatus.none;
-                  table['cellSelected'] = {};
-                }
-              }
-            "
           ></component>
         </template>
         <template v-else>
           <component
             :is="col.type"
             ref="componentRef"
-            v-bind="col.attrs"
+            v-bind="componentAttrs(col)"
             v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)['_rowOldValue'][col.name]"
             bg-color="light-green-1"
           ></component>
@@ -92,7 +83,7 @@
 <script setup lang="ts">
 import { inject, computed, ref, toRaw, onMounted } from 'vue';
 import { Tools } from '@/platform';
-import { selectedMode, editStatus } from './ts/grid.ts';
+import { selectMode, editStatus } from './ts/grid.ts';
 
 const tdRef = ref();
 const componentRef = ref();
@@ -184,8 +175,8 @@ const rowSpanIsFirstComputed = computed(() => {
 
 const tdClassComputed = computed(() => {
   const tdClass = <any>[];
-  if (props.grid.props.selectedMode === selectedMode.cell) {
-    tdClass.push('cellSelected_hover');
+  if (props.grid.props.selectMode === selectMode.cell) {
+    tdClass.push('cellHover');
   }
   if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) {
     if (table['cellSelected']['colName'] === props.col['name'] && table['cellSelected']['rowKey'] === props.scope.row[props.rowKeyName])
@@ -194,6 +185,18 @@ const tdClassComputed = computed(() => {
   return tdClass;
 });
 
+const componentAttrs = (col) => {
+  if (col.attrs) {
+    return col.attrs;
+  } else if (props.grid.props.editor?.form?.fields) {
+    const field = props.grid.props.editor.form.fields.find((item) => item['name'] === col.name);
+    if (field) {
+      return { ...field, label: undefined };
+    }
+  }
+  return undefined;
+};
+
 onMounted(() => {
   if (tdRef.value?.$el) {
     tdWidth.value = tdRef.value.$el.clientWidth;
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 f70dd2cb..3d79abc1 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
@@ -30,9 +30,8 @@
 import { computed, inject, ref, reactive, nextTick, onBeforeMount, toRaw } from 'vue';
 import { useQuasar, exportFile } from 'quasar';
 import { axios, Tools, t, NotifyManager } from '@/platform';
-import { selectedMode, formStatus, editStatus } from './ts/grid';
+import { selectMode, formStatus, editStatus } from './ts/grid';
 import GridConfig from './GridConfig.vue';
-import { throws } from 'assert';
 
 const $q = useQuasar();
 
@@ -368,7 +367,7 @@ const buttonObj = reactive({
       return false;
     },
     click: () => {
-      if (props.grid.props.selectedMode !== selectedMode.cell) {
+      if (props.grid.props.selectMode !== selectMode.cell) {
         NotifyManager.info('非单元格选择模式，无法使用单元格编辑功能');
         return false;
       } else if (Object.keys(table.cellSelected).length === 0 || !table.cellSelected['colName']) {
@@ -393,7 +392,7 @@ const buttonObj = reactive({
       return false;
     },
     click: () => {
-      if (props.grid.props.selectedMode !== selectedMode.cell) {
+      if (props.grid.props.selectMode !== selectMode.cell) {
         NotifyManager.info('非单元格选择模式，无法使用单元格编辑功能');
         return false;
       } else if (Object.keys(table.cellSelected).length === 0 || !table.cellSelected['colName']) {
@@ -609,7 +608,7 @@ const handleChildrenBtn = (arr, moreQueryShow) => {
   for (let i = 0; i < arr.length; i++) {
     const btn = arr[i];
     if (typeof btn === 'string' && !buttonObj[btn]) {
-      throw new Error(`'` + btn + `'` + ' toolbar action NOT exits');
+      throw new Error(`'` + btn + `'` + ' toolbar action NOT exist');
     } else if (Array.isArray(btn) && btn.length > 0) {
       const handleResult = handleChildrenBtn(btn, moreQueryShow);
       if (handleResult && handleResult.length > 0) {
@@ -656,7 +655,7 @@ const handleToolbarActions = () => {
   }
   props.grid.props.toolbarActions.forEach((btn: any, index) => {
     if (typeof btn === 'string' && !buttonObj[btn]) {
-      throw new Error(`'` + btn + `'` + ' toolbar action NOT exits');
+      throw new Error(`'` + btn + `'` + ' toolbar action NOT exist');
     } else if (typeof btn === 'string' && buttonObj[btn]) {
       if (btn === buttonObj.query.name && moreQueryShow) {
         buttons_.value.push([buttonObj[btn], buttonObj[buttonObj.moreQuery.name]]);
@@ -701,11 +700,12 @@ const dbClickOperation = (row) => {
   if (!Tools.isEmpty(row) && props.grid.props.dbClickOperation === buttonObj.expand.name) {
     row['expand'] = Tools.isEmpty(row['expand']) ? true : !row['expand'];
   } else {
-    if (
+    if (!buttonObj[props.grid.props.dbClickOperation] && checkConfigNotContains(buttons_.value)) {
+      throw new Error(`'` + props.grid.props.dbClickOperation + `'` + ' toolbar action NOT exist');
+    } else if (
       props.grid.props.dbClickOperation !== buttonObj.separator &&
       buttonObj[props.grid.props.dbClickOperation] &&
-      checkConfigNotContains(buttons_.value) &&
-      buttonObj[props.grid.props.dbClickOperation]
+      checkConfigNotContains(buttons_.value)
     ) {
       // 双击时配置的dbClickOperation不在用户配置的按钮集中，直接调用内置按钮
       toolbarRef.value.buttonClick(buttonObj[props.grid.props.dbClickOperation]);
@@ -716,16 +716,17 @@ const dbClickOperation = (row) => {
 };
 // 检查用户配置的按钮中是否不包含固定名字的按钮
 const checkConfigNotContains = (arr) => {
-  let flag = false;
+  let flag = true;
   for (let i = 0; i < arr.length; i++) {
     if (typeof arr[i] === 'object' && props.grid.props.dbClickOperation === arr[i]['name']) {
-      flag = true;
+      flag = false;
       break;
     } else if (Array.isArray(arr[i]) && arr[i].length > 0) {
-      flag = checkConfigNotContains(arr[i]);
+      const tempFlag = checkConfigNotContains(arr[i]);
+      flag = tempFlag;
     }
   }
-  return !flag;
+  return flag;
 };
 const getQueryForm = () => {
   return formRef.value;
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 97ebb171..bef6eb0e 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
@@ -1,8 +1,8 @@
 <template>
   <q-tr
     ref="trRef"
-    :no-hover="props.grid.props.selectedMode === selectedMode.row ? false : true"
-    :class="row[table.selectedField] && props.grid.props.selectedMode === selectedMode.row ? 'selected' : ''"
+    :no-hover="props.grid.props.selectMode === selectMode.row ? false : true"
+    :class="row[table.selectedField] && props.grid.props.selectMode === selectMode.row ? 'selected' : ''"
     :draggable="draggableComputed"
     @click.stop.prevent="click($event, row, props.rowIndex)"
     @dblclick.stop.prevent="dbClick($event, row, props.rowIndex)"
@@ -13,21 +13,21 @@
   >
     <q-td
       :ref="(el) => setTdRef(el, cols[0])"
-      :class="props.grid.props.selectedMode === selectedMode.cell ? firstTdClassComputed : 'nowrap text-nowrap'"
+      :class="props.grid.props.selectMode === selectMode.cell ? firstTdClassComputed : 'nowrap text-nowrap'"
       :style="cols[0].type && table.bodyEditStatus !== 'none' ? 'width: ' + (tdWidth[cols[0].name] - 24) + 'px;' : ''"
       @click="
         () => {
           // 判定是否要退出编辑模式
-          if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectedMode === selectedMode.cell) {
+          if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectMode === selectMode.cell) {
             if (table['cellSelected']['colName'] !== cols[0]['name'] || table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
               table.bodyEditStatus = 'none';
             }
-          } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectedMode === selectedMode.cell) {
+          } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectMode === selectMode.cell) {
             if (table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
               table.bodyEditStatus = 'none';
             }
           }
-          if (table.bodyEditStatus === 'none' && props.grid.props.selectedMode === selectedMode.cell) {
+          if (table.bodyEditStatus === 'none' && props.grid.props.selectMode === selectMode.cell) {
             table['cellSelected'] = {
               row: toRaw(props.row),
               rowKey: props.row[props.rowKey],
@@ -85,7 +85,7 @@
                 bg-color="light-green-1"
                 @blur="
                   () => {
-                    if (props.grid.props.selectedMode === selectedMode.cell && table.bodyEditStatus === editStatus.cell) {
+                    if (props.grid.props.selectMode === selectMode.cell && table.bodyEditStatus === editStatus.cell) {
                       // 失去焦点，退出编辑模式
                       table.bodyEditStatus = editStatus.none;
                       table['cellSelected'] = {};
@@ -119,22 +119,22 @@
       <q-td
         v-if="index > 0"
         :ref="(el) => setTdRef(el, col)"
-        :class="props.grid.props.selectedMode === selectedMode.cell ? tdClassComputed(col) : col.__thClass + ' ' + col.classes"
+        :class="props.grid.props.selectMode === selectMode.cell ? tdClassComputed(col) : col.__thClass + ' ' + col.classes"
         :title="getTitle(col)"
         :style="col.style + (col.type && table.bodyEditStatus !== 'none' ? ';width: ' + (tdWidth[col.name] - 24) + 'px;' : '')"
         @click="
           () => {
             // 判定是否要退出编辑模式
-            if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectedMode === selectedMode.cell) {
+            if (props.grid.props.localMode && table.bodyEditStatus === editStatus.cell && props.grid.props.selectMode === selectMode.cell) {
               if (table['cellSelected']['colName'] !== col['name'] || table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
                 table.bodyEditStatus = 'none';
               }
-            } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectedMode === selectedMode.cell) {
+            } else if (props.grid.props.localMode && table.bodyEditStatus === editStatus.row && props.grid.props.selectMode === selectMode.cell) {
               if (table['cellSelected']['row'][props.rowKey] !== props.row[props.rowKey]) {
                 table.bodyEditStatus = 'none';
               }
             }
-            if (table.bodyEditStatus === 'none' && props.grid.props.selectedMode === selectedMode.cell) {
+            if (table.bodyEditStatus === 'none' && props.grid.props.selectMode === selectMode.cell) {
               table['cellSelected'] = {
                 row: toRaw(props.row),
                 rowKey: props.row[props.rowKey],
@@ -161,15 +161,6 @@
               v-bind="col.attrs"
               v-model="props.getRow(table.rows, props.row[props.rowKey], false)[col.name]"
               bg-color="light-green-1"
-              @blur="
-                () => {
-                  if (props.grid.props.selectedMode === selectedMode.cell && table.bodyEditStatus === editStatus.cell) {
-                    // 失去焦点，退出编辑模式
-                    table.bodyEditStatus = editStatus.none;
-                    table['cellSelected'] = {};
-                  }
-                }
-              "
             ></component>
           </template>
           <template v-else>
@@ -236,7 +227,7 @@
 import { ref, computed, inject, toRaw, reactive, onMounted } from 'vue';
 import { Tools, NotifyManager } from '@/platform';
 import GridEditToolbar from './GridEditToolbar.vue';
-import { dndImage, dndMode, selectedMode, editStatus } from './ts/grid';
+import { dndImage, dndMode, selectMode, editStatus } from './ts/grid';
 
 const trRef = ref();
 const tdDivRef = ref();
@@ -359,8 +350,8 @@ const getTitle = (col) => {
 
 const firstTdClassComputed = computed(() => {
   const tdClass = <any>['nowrap', 'text-nowrap'];
-  if (props.grid.props.selectedMode === selectedMode.cell) {
-    tdClass.push('cellSelected_hover');
+  if (props.grid.props.selectMode === selectMode.cell) {
+    tdClass.push('cellHover');
   }
   if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) {
     if (table['cellSelected']['colName'] === props.cols[0]['name'] && table['cellSelected']['rowKey'] === props.row[props.rowKey]) {
@@ -372,8 +363,8 @@ const firstTdClassComputed = computed(() => {
 const tdClassComputed = computed(() => {
   return (col) => {
     let tdClass = col.__thClass + ' ' + col.classes;
-    if (props.grid.props.selectedMode === selectedMode.cell) {
-      tdClass += ' cellSelected_hover';
+    if (props.grid.props.selectMode === selectMode.cell) {
+      tdClass += ' cellHover';
     }
     if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) {
       if (table['cellSelected']['colName'] === col['name'] && table['cellSelected']['rowKey'] === props.row[props.rowKey]) {
@@ -842,13 +833,13 @@ const click = (evt, row, rowIndex) => {
   if (
     props.grid.props.localMode &&
     table.bodyEditStatus !== editStatus.none &&
-    props.grid.props.selectedMode === selectedMode.row &&
+    props.grid.props.selectMode === selectMode.row &&
     selected &&
     row[props.rowKey] !== selected[props.rowKey]
   ) {
     // 退出编辑状态
     table.bodyEditStatus = editStatus.none;
-  } else if (table.bodyEditStatus === editStatus.none && props.grid.props.selectedMode !== selectedMode.none) {
+  } else if (table.bodyEditStatus === editStatus.none && props.grid.props.selectMode !== selectMode.none) {
     if (!evt.ctrlKey) {
       props.grid.clearSelected();
     }
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 88d6d527..e231e87a 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
@@ -127,7 +127,7 @@ import GridPagination from './GridPagination.vue';
 import GridEditor from './GridEditor.vue';
 import CellEditor from './CellEditor.vue';
 import GridView from './GridView.vue';
-import { selectedMode as selectedMode_, getMergeColumns, sortByProperties, editStatus } from './ts/grid.ts';
+import { selectMode as selectMode_, getMergeColumns, sortByProperties, editStatus } from './ts/grid.ts';
 
 import { columnDefaultProps } from './ts/grid.ts';
 
@@ -153,7 +153,7 @@ const props = defineProps({
   title: { type: String, default: '' }, // 表格标题
   autoFetchData: { type: Boolean, default: true }, // 自动加载数据
   localMode: { type: Boolean, default: false }, // 本地模式，启用该模式后，除了查询数据依旧通过 autoFetchData 与 url 控制外，其他所有与后端交互的请求都失效，同时分页属性也失效
-  selectedMode: { type: String, default: selectedMode_.row }, // 选择模式
+  selectMode: { type: String, default: selectMode_.row }, // 选择模式
   dndMode: { type: String, default: undefined }, // 拖拽数据行排序的模式，默认不可拖拽，字符串`local`为本地排序，只根据配置的字段进行本地排序，不会将数据发送至后端，字符串`server`为远程排序，拖拽完成后会将数据发送至后端。
   dndOrderBy: { type: String, default: 'order' }, // 拖拽排序时根据哪个字段进行排序，默认为`order`字段
   pageable: { type: Boolean, default: true }, // 是否需要分页，当启用树形表格模式时该属性失效，树形表格不支持分页。
@@ -581,16 +581,10 @@ const tableFullscreenFun = (value) => {
 
 const rowClick = (evt: any, row: any, index: any) => {
   const selected = getSelectedRow();
-  if (
-    props.localMode &&
-    table.bodyEditStatus !== editStatus.none &&
-    props.selectedMode === selectedMode_.row &&
-    selected &&
-    row[rowKey_] !== selected[rowKey_]
-  ) {
+  if (props.localMode && table.bodyEditStatus !== editStatus.none && props.selectMode === selectMode_.row && selected && row[rowKey_] !== selected[rowKey_]) {
     // 退出编辑状态
     table.bodyEditStatus = editStatus.none;
-  } else if (table.bodyEditStatus === editStatus.none && props.selectedMode !== selectedMode_.none) {
+  } else if (table.bodyEditStatus === editStatus.none && props.selectMode !== selectMode_.none) {
     // 非树形表格行点击选中与checkbox绑定，即行选中时checkbox也勾选，checkbox勾选时行选中。
     if (!evt.ctrlKey) {
       clearSelected();
@@ -605,7 +599,7 @@ const rowClick = (evt: any, row: any, index: any) => {
   }
 };
 const rowDbClick = (evt, row, index) => {
-  if (table.bodyEditStatus === 'none' && props.selectedMode !== selectedMode_.none) {
+  if (table.bodyEditStatus === 'none' && props.selectMode !== selectMode_.none) {
     if (props.onRowDbClick) {
       emit('rowDbClick', { grid: instance, evt, row, index });
     } else if (props.dbClickOperation === 'view') {
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 6bfffc8e..a6966c06 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
@@ -1,8 +1,8 @@
 .w-grid .cellSelected {
-  background-color: #0000001f;
+  background-color: rgba(0, 0, 0, .06);
 }
-.w-grid .cellSelected_hover:hover {
-  background-color: #0000001f;
+.w-grid .cellHover:hover {
+  background-color: rgba(0, 0, 0, .03);
 }
 .w-grid .q-table__top {
   padding: var(--tableTopPadding) var(--tableTopPadding);
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/grid.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/grid.ts
index 91b7488b..ef5f0ad4 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/grid.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/grid.ts
@@ -8,7 +8,7 @@ export const dndMode = {
 export const dndImage = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E`;
 
 // 选择模式
-export const selectedMode = {
+export const selectMode = {
   none: 'none', // 不允许选择
   row: 'row', // 行选择
   cell: 'cell', // 单元格选择