From 0eccb9ac7b225f3a63674196f2bafe5fa6d99c65 Mon Sep 17 00:00:00 2001
From: buqiyuan <1743369777@qq.com>
Date: Sun, 28 Aug 2022 14:31:30 +0800
Subject: [PATCH] feat(components): [dynamic-table] support cell edit

---
 package.json                                  |  17 +-
 .../src/components/editable-cell/index.vue    | 197 ++++++++---
 .../table-settings/column-setting.vue         |  14 +-
 .../core/dynamic-table/src/dynamic-table.ts   |  26 +-
 .../core/dynamic-table/src/dynamic-table.vue  |   5 +-
 .../core/dynamic-table/src/hooks/index.ts     |   7 +-
 .../dynamic-table/src/hooks/useColumns.tsx    |  26 +-
 .../dynamic-table/src/hooks/useEditable.ts    | 112 ++++++-
 .../src/hooks/useTableMethods.tsx             |   8 +-
 .../dynamic-table/src/hooks/useTableState.tsx |  41 ++-
 .../core/dynamic-table/src/types/column.ts    |  42 +--
 .../core/dynamic-table/src/types/table.ts     |  23 ++
 .../core/schema-form/src/componentMap.ts      |   2 +
 .../core/schema-form/src/hooks/useForm.tsx    |   2 +-
 .../core/schema-form/src/schema-form-item.vue |  10 +-
 .../core/schema-form/src/schema-form.vue      |   2 +-
 .../core/schema-form/src/types/component.ts   |  12 +
 src/utils/index.ts                            |   4 +-
 src/utils/is/index.ts                         |   4 +-
 .../demos/form/basic-form/form-schema.tsx     |  21 +-
 .../demos/tables/edit-row-table/columns.tsx   |  75 ++---
 .../demos/tables/edit-row-table/index.vue     | 101 ++++--
 .../demos/tables/search-table/columns.tsx     |   1 +
 yarn.lock                                     | 312 ++++++++++++------
 24 files changed, 775 insertions(+), 289 deletions(-)

diff --git a/package.json b/package.json
index e0829354d..3b745b97e 100644
--- a/package.json
+++ b/package.json
@@ -37,14 +37,14 @@
     "@vueuse/core": "~9.1.1",
     "ant-design-vue": "3.2.11",
     "axios": "~0.27.2",
-    "core-js": "~3.24.1",
+    "core-js": "~3.25.0",
     "dayjs": "~1.11.5",
     "file-saver": "~2.0.5",
     "lodash-es": "~4.17.21",
     "mitt": "~3.0.0",
     "mockjs": "~1.1.0",
     "nprogress": "~1.0.0-1",
-    "pinia": "~2.0.20",
+    "pinia": "~2.0.21",
     "qs": "~6.11.0",
     "socket.io-client": "~4.5.1",
     "sortablejs": "~1.15.0",
@@ -55,13 +55,13 @@
     "xlsx": "~0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "~17.0.3",
-    "@commitlint/config-conventional": "~17.0.3",
+    "@commitlint/cli": "~17.1.1",
+    "@commitlint/config-conventional": "~17.1.0",
     "@types/lodash-es": "~4.17.6",
     "@types/node": "~18.7.13",
     "@types/webpack-env": "~1.18.0",
-    "@typescript-eslint/eslint-plugin": "~5.34.0",
-    "@typescript-eslint/parser": "~5.34.0",
+    "@typescript-eslint/eslint-plugin": "~5.35.1",
+    "@typescript-eslint/parser": "~5.35.1",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-router": "~5.0.8",
@@ -74,7 +74,7 @@
     "cross-env": "~7.0.3",
     "cz-git": "~1.3.11",
     "czg": "~1.3.11",
-    "eslint": "~8.22.0",
+    "eslint": "~8.23.0",
     "eslint-config-prettier": "~8.5.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "~4.2.1",
@@ -98,11 +98,12 @@
     "stylelint-config-standard": "~28.0.0",
     "stylelint-order": "~5.0.0",
     "svg-sprite-loader": "~6.0.11",
+    "ts-node": "^10.9.1",
     "typescript": "~4.7.4",
     "unplugin-vue-define-options": "~0.7.3",
     "vue-cli-plugin-windicss": "~1.1.6",
     "vue-eslint-parser": "~9.0.3",
-    "vue-tsc": "^0.40.1"
+    "vue-tsc": "^0.40.2"
   },
   "__npminstall_done": false,
   "repository": {
diff --git a/src/components/core/dynamic-table/src/components/editable-cell/index.vue b/src/components/core/dynamic-table/src/components/editable-cell/index.vue
index efdc25795..89aa64469 100644
--- a/src/components/core/dynamic-table/src/components/editable-cell/index.vue
+++ b/src/components/core/dynamic-table/src/components/editable-cell/index.vue
@@ -1,60 +1,179 @@
 <template>
-  <Popover :visible="!!errorMsgs?.length" placement="topRight">
-    <template #content>
-      <template v-for="err in errorMsgs" :key="err">
-        <Typography.Text type="danger">{{ err }}</Typography.Text>
+  <Spin :spinning="saving">
+    <div class="editable-cell">
+      <Popover :visible="!!errorMsgs?.length" placement="topRight">
+        <template #content>
+          <template v-for="err in errorMsgs" :key="err">
+            <a-typography-text type="danger">{{ err }}</a-typography-text>
+          </template>
+        </template>
+        <a-row type="flex" :gutter="[8]">
+          <SchemaFormItem
+            v-if="(getIsEditable || getIsCellEdit) && getSchema"
+            v-model:form-model="editFormModel"
+            :schema="getSchema"
+            :table-instance="tableContext"
+            :table-row-key="rowKey"
+          >
+            <template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
+              <slot :name="item" v-bind="data || {}"></slot>
+            </template>
+          </SchemaFormItem>
+          <a-col v-if="getIsCellEdit" :span="4" class="flex items-center">
+            <CheckOutlined @click="handleSaveCell" />
+            <CloseOutlined @click="handleCancelSaveCell" />
+          </a-col>
+        </a-row>
+      </Popover>
+      <template v-if="!isCellEdit && editableType === 'cell'">
+        <slot />
+        <EditOutlined @click="startEditCell" />
       </template>
-    </template>
-    <SchemaFormItem
-      v-if="getIsEditable && getSchema"
-      :key="rowKey"
-      :schema="getSchema"
-      :form-model="editFormModel"
-      :table-instance="tableContext"
-      :table-row-key="rowKey"
-    >
-      <template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
-        <slot :name="item" v-bind="data || {}"></slot>
-      </template>
-    </SchemaFormItem>
-  </Popover>
+    </div>
+  </Spin>
 </template>
 
-<script lang="ts" setup>
-  import { computed } from 'vue';
-  import { Popover, Typography } from 'ant-design-vue';
+<script lang="ts">
+  import { defineComponent, computed, ref } from 'vue';
+  import { EditOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons-vue';
+  import { Popover, Typography, Row, Col, Spin } from 'ant-design-vue';
   import { useTableContext } from '../../hooks';
   import type { PropType } from 'vue';
+  import type { CustomRenderParams, EditableType } from '@/components/core/dynamic-table/src/types';
   import { schemaFormItemProps, SchemaFormItem } from '@/components/core/schema-form';
+  import { isAsyncFunction } from '@/utils/is';
 
-  defineOptions({
+  export default defineComponent({
     name: 'EditableCell',
-  });
+    components: {
+      SchemaFormItem,
+      EditOutlined,
+      CloseOutlined,
+      CheckOutlined,
+      Popover,
+      Spin,
+      [Col.name]: Col,
+      [Row.name]: Row,
+      'a-typography-text': Typography.Text,
+    },
+    props: {
+      ...schemaFormItemProps,
+      rowKey: [String, Number] as PropType<Key>,
+      editableType: [String] as PropType<EditableType>,
+      column: [Object] as PropType<CustomRenderParams>,
+    },
+    setup(props) {
+      const saving = ref(false);
+      const isCellEdit = ref(props.column?.column?.defaultEditable);
 
-  const props = defineProps({
-    ...schemaFormItemProps,
-    rowKey: [String, Number] as PropType<Key>,
-  });
+      const tableContext = useTableContext();
+      const {
+        editFormModel,
+        editTableFormRef,
+        editFormErrorMsgs,
+        editableCellKeys,
+        isEditable,
+        startCellEditable,
+        cancelCellEditable,
+        validateCell,
+      } = tableContext;
 
-  const tableContext = useTableContext();
-  const { editFormModel, editTableFormRef, editFormErrorMsgs, isEditable } = tableContext;
+      const dataIndex = computed(() => {
+        return String(props.column?.column?.dataIndex);
+      });
 
-  const getSchema = computed(() => {
-    const field = props.schema.field;
-    return editTableFormRef.value?.getSchemaByFiled(field) || props.schema;
-  });
+      const getSchema = computed(() => {
+        const field = props.schema.field;
+        const schema = editTableFormRef.value?.getSchemaByFiled(field) || props.schema;
+        return {
+          ...schema,
+          colProps: {
+            ...schema.colProps,
+            span: props.editableType === 'cell' ? 20 : 24,
+          },
+        };
+      });
 
-  const getIsEditable = computed(() => {
-    return props.rowKey && isEditable(props.rowKey);
-  });
+      const getIsEditable = computed(() => {
+        return props.rowKey && isEditable(props.rowKey);
+      });
+
+      const getIsCellEdit = computed(() => {
+        const { rowKey } = props;
+        return (
+          isCellEdit.value &&
+          props.editableType === 'cell' &&
+          editableCellKeys.value.has(`${rowKey}.${dataIndex.value}`)
+        );
+      });
+
+      const errorMsgs = computed(() => {
+        const field = props.schema.field;
+        return editFormErrorMsgs.value.get(field);
+      });
 
-  const errorMsgs = computed(() => {
-    const field = props.schema.field;
-    return editFormErrorMsgs.value.get(field);
+      const startEditCell = () => {
+        startCellEditable(props.rowKey!, dataIndex.value, props.column?.record);
+        isCellEdit.value = true;
+      };
+
+      const handleSaveCell = async () => {
+        const { rowKey, column } = props;
+        await validateCell(rowKey!, dataIndex.value);
+        if (isAsyncFunction(tableContext?.onSave)) {
+          saving.value = true;
+          await tableContext
+            .onSave(rowKey!, editFormModel.value[rowKey!], column?.record)
+            .finally(() => (saving.value = false));
+          cancelCellEditable(rowKey!, dataIndex.value);
+          isCellEdit.value = false;
+        }
+      };
+
+      const handleCancelSaveCell = () => {
+        const { rowKey, column } = props;
+        tableContext?.onCancel?.(rowKey!, editFormModel.value[rowKey!], column?.record);
+        isCellEdit.value = false;
+        cancelCellEditable(props.rowKey!, dataIndex.value);
+      };
+
+      return {
+        saving,
+        isCellEdit,
+        editableCellKeys,
+        editFormModel,
+        getSchema,
+        getIsEditable,
+        getIsCellEdit,
+        errorMsgs,
+        tableContext,
+        startEditCell,
+        handleSaveCell,
+        handleCancelSaveCell,
+      };
+    },
   });
 </script>
 
 <style lang="less" scoped>
+  .editable-cell {
+    position: relative;
+
+    &:hover {
+      .anticon-edit {
+        display: block;
+      }
+    }
+
+    .anticon-edit {
+      display: none;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+    }
+  }
+
   :deep(.ant-form-item-explain) {
     display: none;
   }
diff --git a/src/components/core/dynamic-table/src/components/table-settings/column-setting.vue b/src/components/core/dynamic-table/src/components/table-settings/column-setting.vue
index 28a8c2903..794c9d7a2 100644
--- a/src/components/core/dynamic-table/src/components/table-settings/column-setting.vue
+++ b/src/components/core/dynamic-table/src/components/table-settings/column-setting.vue
@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, nextTick, ref, unref, watchEffect } from 'vue';
+  import { computed, nextTick, ref, unref, watch } from 'vue';
   import {
     SettingOutlined,
     VerticalRightOutlined,
@@ -125,9 +125,15 @@
     );
   });
 
-  watchEffect(() => {
-    table.setProps({ columns: tableColumns.value });
-  });
+  watch(
+    tableColumns,
+    (columns) => {
+      table.setProps({ columns });
+    },
+    {
+      deep: true,
+    },
+  );
   // 设置序号列
   const handleIndexCheckChange = (e) => {
     table.setProps({ showIndex: e.target.checked });
diff --git a/src/components/core/dynamic-table/src/dynamic-table.ts b/src/components/core/dynamic-table/src/dynamic-table.ts
index c8c751175..eba470e28 100644
--- a/src/components/core/dynamic-table/src/dynamic-table.ts
+++ b/src/components/core/dynamic-table/src/dynamic-table.ts
@@ -2,7 +2,14 @@ import { tableProps } from 'ant-design-vue/es/table';
 import type DynamicTable from './dynamic-table.vue';
 import type { PropType, ExtractPropTypes } from 'vue';
 import type { BookType } from 'xlsx';
-import type { LoadDataParams, TableColumn, OnChangeCallbackParams } from './types/';
+import type {
+  LoadDataParams,
+  TableColumn,
+  OnChangeCallbackParams,
+  EditableType,
+  OnSave,
+  OnCancel,
+} from './types/';
 import type { SchemaFormProps } from '@/components/core/schema-form';
 import type { GetRowKey } from 'ant-design-vue/es/table/interface';
 import { isBoolean } from '@/utils/is';
@@ -85,11 +92,24 @@ export const dynamicTableProps = {
     >,
     default: null,
   },
-  /** 编辑行类型，支持 只能同时编辑一行 | 同时编辑多行 */
+  /** 编辑行类型
+   * @const `single`: 只能同时编辑一行
+   * @const `multiple`: 同时编辑多行
+   * @const `cell`: 可编辑单元格
+   * @defaultValue `single`
+   */
   editableType: {
-    type: String as PropType<'single' | 'multiple'>,
+    type: String as PropType<EditableType>,
     default: 'single',
   },
+  /** 单元格保存编辑回调 */
+  onSave: {
+    type: Function as PropType<OnSave>,
+  },
+  /** 单元格取消编辑回调 */
+  onCancel: {
+    type: Function as PropType<OnCancel>,
+  },
   /** 只能编辑一行的的提示 */
   onlyOneLineEditorAlertMessage: String,
 } as const;
diff --git a/src/components/core/dynamic-table/src/dynamic-table.vue b/src/components/core/dynamic-table/src/dynamic-table.vue
index ce9a02c22..8db09a630 100644
--- a/src/components/core/dynamic-table/src/dynamic-table.vue
+++ b/src/components/core/dynamic-table/src/dynamic-table.vue
@@ -3,7 +3,7 @@
     <SchemaForm
       v-if="search"
       ref="queryFormRef"
-      class="bg-white dark:bg-black mb-16px pt-24px pr-24px"
+      class="bg-white dark:bg-black mb-16px !pt-24px pr-24px"
       submit-on-reset
       v-bind="getFormProps"
       :table-instance="tableAction"
@@ -27,7 +27,7 @@
         </template>
       </ToolBar>
       <component
-        :is="Object.keys(editFormModel).length ? SchemaForm : 'div'"
+        :is="editableType === 'cell' || Object.keys(editFormModel).length ? SchemaForm : 'div'"
         ref="editTableFormRef"
         layout="inline"
         no-style
@@ -128,6 +128,7 @@
     ...tableMethods,
     ...editableHooks,
     ...exportData2ExcelHooks,
+    emit,
   };
 
   createTableContext(instance);
diff --git a/src/components/core/dynamic-table/src/hooks/index.ts b/src/components/core/dynamic-table/src/hooks/index.ts
index e8a3db3bf..b019926c9 100644
--- a/src/components/core/dynamic-table/src/hooks/index.ts
+++ b/src/components/core/dynamic-table/src/hooks/index.ts
@@ -1,7 +1,7 @@
 import type { TableState } from './useTableState';
 import type { TableMethods } from './useTableMethods';
 import type { ExportData2Excel } from './useExportData2Excel';
-import type { DynamicTableProps } from '../dynamic-table';
+import type { DynamicTableProps, DynamicTableEmitFn } from '../dynamic-table';
 
 export * from './useTable';
 export * from './useTableContext';
@@ -12,4 +12,7 @@ export * from './useTableMethods';
 export * from './useColumns';
 export * from './useEditable';
 
-export type DynamicTableType = DynamicTableProps & TableState & TableMethods & ExportData2Excel;
+export type DynamicTableType = DynamicTableProps &
+  TableState &
+  TableMethods &
+  ExportData2Excel & { emit: DynamicTableEmitFn };
diff --git a/src/components/core/dynamic-table/src/hooks/useColumns.tsx b/src/components/core/dynamic-table/src/hooks/useColumns.tsx
index 6fbf53700..dd1ebff00 100644
--- a/src/components/core/dynamic-table/src/hooks/useColumns.tsx
+++ b/src/components/core/dynamic-table/src/hooks/useColumns.tsx
@@ -1,7 +1,7 @@
 import { computed, unref, useSlots } from 'vue';
 import { cloneDeep, isFunction, mergeWith } from 'lodash-es';
 import { EditableCell } from '../components/';
-import { ColumnKeyFlag } from '../types/column';
+import { ColumnKeyFlag, CustomRenderParams } from '../types/column';
 import type { Slots } from 'vue';
 import type {
   TableActionType,
@@ -50,7 +50,7 @@ export const useColumns = ({ state, methods, props, tableAction }: UseTableColum
           const { current = 1, pageSize = 10 } = getPagination!;
           return ((current < 1 ? 1 : current) - 1) * pageSize + index + 1;
         },
-      });
+      } as TableColumn);
     }
 
     return columns.map((item) => {
@@ -60,23 +60,31 @@ export const useColumns = ({ state, methods, props, tableAction }: UseTableColum
       const columnKey = getColumnKey(item) as string;
 
       item.customRender = (options) => {
-        const { record, index } = options;
+        const { record, index, text } = options as CustomRenderParams<Recordable<any>>;
         /** 当前行是否开启了编辑行模式 */
         const isEditableRow = isEditable(record[rowKey]);
+        /** 是否开启了单元格编辑模式 */
+        const isEditableCell = innerProps.editableType === 'cell';
         /** 当前单元格是否允许被编辑 */
         const isCellEditable = isBoolean(item.editable)
           ? item.editable
           : item.editable?.(options) ?? true;
+        /** 是否允许被编辑 */
         const isShowEditable =
-          isEditableRow && isCellEditable && !ColumnKeyFlags.includes(columnKey);
+          (isEditableRow || isEditableCell) &&
+          isCellEditable &&
+          !ColumnKeyFlags.includes(columnKey);
 
         return isShowEditable ? (
-          // @ts-ignore
           <EditableCell
             schema={getColumnFormSchema(item, record)}
             rowKey={record[rowKey] ?? index}
+            editableType={innerProps.editableType}
+            column={options}
             v-slots={slots}
-          ></EditableCell>
+          >
+            {customRender?.(options) ?? text}
+          </EditableCell>
         ) : (
           customRender?.(options)
         );
@@ -99,7 +107,7 @@ export const useColumns = ({ state, methods, props, tableAction }: UseTableColum
         key: item.key ?? (item.dataIndex as Key),
         dataIndex: item.dataIndex ?? (item.key as Key),
         ...item,
-      };
+      } as TableColumn;
     });
   });
 
@@ -115,7 +123,7 @@ export const useColumns = ({ state, methods, props, tableAction }: UseTableColum
     }
   }
 
-  // 获取当前行的form schema
+  /** 获取当前行的form schema */
   const getColumnFormSchema = (item: TableColumn, record: Recordable): FormSchema<string> => {
     const key = getColumnKey(item) as string;
     /** 是否继承搜索表单的属性 */
@@ -129,7 +137,7 @@ export const useColumns = ({ state, methods, props, tableAction }: UseTableColum
       component: 'Input',
       defaultValue: record[key],
       colProps: {
-        span: 24,
+        span: unref(getProps).editableType === 'cell' ? 20 : 24,
       },
       formItemProps: {
         help: '',
diff --git a/src/components/core/dynamic-table/src/hooks/useEditable.ts b/src/components/core/dynamic-table/src/hooks/useEditable.ts
index 5ab2b9f16..c5ef26e77 100644
--- a/src/components/core/dynamic-table/src/hooks/useEditable.ts
+++ b/src/components/core/dynamic-table/src/hooks/useEditable.ts
@@ -1,4 +1,4 @@
-import { nextTick } from 'vue';
+import { nextTick, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 import { message } from 'ant-design-vue';
 import type { DynamicTableProps } from '../dynamic-table';
@@ -12,7 +12,33 @@ type UseTableMethodsContext = {
 export type UseEditableType = ReturnType<typeof useEditable>;
 
 export const useEditable = ({ state, props }: UseTableMethodsContext) => {
-  const { tableData, editFormModel, editTableFormRef, editFormErrorMsgs } = state;
+  const {
+    tableData,
+    editFormModel,
+    editTableFormRef,
+    editFormErrorMsgs,
+    editableCellKeys,
+    editableRowKeys,
+  } = state;
+
+  watch(
+    () => props.editableType,
+    (type) => {
+      if (type === 'cell') {
+        editableRowKeys.value.clear();
+      } else {
+        editableCellKeys.value.clear();
+      }
+    },
+  );
+
+  /** 设置表单值 */
+  const setEditFormModel = (recordKey: Key, editValue: Recordable) => {
+    Reflect.set(editFormModel.value, recordKey, editValue);
+    nextTick(() => {
+      editTableFormRef.value?.setFormModel(recordKey, editValue);
+    });
+  };
 
   /**
    * @description 进入编辑行状态
@@ -21,9 +47,10 @@ export const useEditable = ({ state, props }: UseTableMethodsContext) => {
    * @param currentRow 当前行数据
    */
   const startEditable = (recordKey: Key, currentRow?: Recordable) => {
+    editableCellKeys.value.clear();
     console.log('startEditable editFormModel', editFormModel);
     // 如果是单行的话，不允许多行编辑
-    if (Object.keys(editFormModel.value).length > 0 && props.editableType === 'single') {
+    if (editableRowKeys.value.size > 0 && props.editableType === 'single') {
       message.warn(props.onlyOneLineEditorAlertMessage || '只能同时编辑一行');
       return false;
     }
@@ -31,34 +58,83 @@ export const useEditable = ({ state, props }: UseTableMethodsContext) => {
     const editValue = cloneDeep(
       currentRow ?? tableData.value.find((n) => n[String(props.rowKey)] === recordKey),
     );
-
-    Reflect.set(editFormModel.value, recordKey, editValue);
-    nextTick(() => {
-      editTableFormRef.value?.setFormModel(recordKey, editValue);
+    // 用户设置的默认值优先
+    props.columns.forEach((item) => {
+      const field = (item.dataIndex || item.key) as string;
+      if (item.formItemProps && Reflect.has(item.formItemProps, 'defaultValue')) {
+        editValue[field] = item.formItemProps.defaultValue;
+      }
+      if (item.editFormItemProps && Reflect.has(item.editFormItemProps, 'defaultValue')) {
+        editValue[field] = item.editFormItemProps.defaultValue;
+      }
     });
+    setEditFormModel(recordKey, editValue);
+    editableRowKeys.value.add(recordKey);
     return true;
   };
 
+  /** 进入编辑单元格状态 */
+  const startCellEditable = (recordKey: Key, dataIndex: Key, currentRow?: Recordable) => {
+    editableRowKeys.value.clear();
+    // 克隆当前行数据作为临时编辑的表单数据，避免直接修改原数据
+    const editValue = cloneDeep(
+      currentRow ?? tableData.value.find((n) => n[String(props.rowKey)] === recordKey),
+    );
+    const targetColumn = props.columns.find((n) => n.dataIndex === dataIndex);
+    if (targetColumn) {
+      const field = (targetColumn.dataIndex || targetColumn.key) as string;
+      if (targetColumn.formItemProps && Reflect.has(targetColumn.formItemProps, 'defaultValue')) {
+        editValue[field] = targetColumn.formItemProps.defaultValue;
+      }
+      if (
+        targetColumn.editFormItemProps &&
+        Reflect.has(targetColumn.editFormItemProps, 'defaultValue')
+      ) {
+        editValue[field] = targetColumn.editFormItemProps.defaultValue;
+      }
+    }
+    editableCellKeys.value.add(`${recordKey}.${dataIndex}`);
+    setEditFormModel(recordKey, {
+      ...(getEditFormModel(recordKey) || editValue),
+      [dataIndex]: editValue[dataIndex],
+    });
+  };
+
+  /** 取消编辑单元格 */
+  const cancelCellEditable = (recordKey: Key, dataIndex: Key) => {
+    editableCellKeys.value.delete(`${recordKey}.${dataIndex}`);
+    const editFormModel = getEditFormModel(recordKey);
+    const record = tableData.value.find((n) => n[String(props.rowKey)] === recordKey);
+    if (record) {
+      // 取消编辑，还原默认值
+      Reflect.set(editFormModel, dataIndex, record[dataIndex]);
+    }
+    /** 表单项的校验错误信息也清掉 */
+    editFormErrorMsgs.value.delete(`${recordKey}.${dataIndex}`);
+  };
+
   /**
    * 退出编辑行状态
    *
    * @param recordKey
    */
   const cancelEditable = (recordKey: Key) => {
-    nextTick(() => {
-      editTableFormRef.value?.delFormModel(recordKey);
-    });
     const formModel = getEditFormModel(recordKey);
     /** 表单项的校验错误信息也清掉 */
     Object.keys(formModel).forEach((field) =>
       editFormErrorMsgs.value.delete(`${recordKey}.${field}`),
     );
 
+    nextTick(() => {
+      editTableFormRef.value?.delFormModel?.(recordKey);
+    });
+
+    editableRowKeys.value.delete(recordKey);
     return Reflect.deleteProperty(editFormModel.value, recordKey);
   };
 
   /** 这行是不是编辑状态 */
-  const isEditable = (recordKey: Key) => Reflect.has(editFormModel.value, recordKey);
+  const isEditable = (recordKey: Key) => editableRowKeys.value.has(recordKey);
 
   /** 获取表单编辑后的值 */
   const getEditFormModel = (recordKey: Key) => Reflect.get(editFormModel.value, recordKey);
@@ -70,11 +146,25 @@ export const useEditable = ({ state, props }: UseTableMethodsContext) => {
     return result?.[recordKey] ?? result;
   };
 
+  /**
+   * 单元格表单是否校验通过
+   * @param recordKey 当前行ID
+   * @param dataIndex 当前单元格字段名, eg: `column.dataIndex`
+   *  */
+  const validateCell = async (recordKey: Key, dataIndex: Key) => {
+    const result = await editTableFormRef.value?.validateFields([[String(recordKey), dataIndex]]);
+    return result?.[recordKey] ?? result;
+  };
+
   return {
+    setEditFormModel,
     startEditable,
+    startCellEditable,
+    cancelCellEditable,
     cancelEditable,
     isEditable,
     validateRow,
+    validateCell,
     getEditFormModel,
   };
 };
diff --git a/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx b/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx
index 0ec3bc10b..45bb880b6 100644
--- a/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx
+++ b/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx
@@ -4,6 +4,7 @@ import { useEditable } from './useEditable';
 import type { DynamicTableProps, DynamicTableEmitFn } from '../dynamic-table';
 import type { OnChangeCallbackParams, TableColumn } from '../types/';
 import type { TableState } from './useTableState';
+import { isAsyncFunction } from '@/utils/is';
 
 export type TableMethods = ReturnType<typeof useTableMethods>;
 
@@ -40,7 +41,10 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext)
    */
   const fetchData = async (params = {}, rest?: OnChangeCallbackParams) => {
     // 如果用户没有提供dataSource并且dataRequest是一个函数，那就进行接口请求
-    if (Object.is(props.dataSource, undefined) && isFunction(props.dataRequest)) {
+    if (
+      Object.is(props.dataSource, undefined) &&
+      (isFunction(props.dataRequest) || isAsyncFunction(props.dataRequest))
+    ) {
       const _pagination = unref(paginationRef)!;
       // 是否启用了分页
       const enablePagination = isObject(_pagination);
@@ -120,7 +124,7 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext)
 
   // 获取表格列key
   const getColumnKey = (column: TableColumn) => {
-    return column?.key || column?.dataIndex;
+    return (column?.key || column?.dataIndex) as string;
   };
 
   /** 编辑表单验证失败回调 */
diff --git a/src/components/core/dynamic-table/src/hooks/useTableState.tsx b/src/components/core/dynamic-table/src/hooks/useTableState.tsx
index d49f2f93c..fa526b27f 100644
--- a/src/components/core/dynamic-table/src/hooks/useTableState.tsx
+++ b/src/components/core/dynamic-table/src/hooks/useTableState.tsx
@@ -1,4 +1,4 @@
-import { computed, ref, unref, watchEffect } from 'vue';
+import { computed, ref, unref, watch } from 'vue';
 import { omit } from 'lodash-es';
 import type { Slots } from 'vue';
 import type { DynamicTableProps } from '../dynamic-table';
@@ -34,6 +34,10 @@ export const useTableState = ({ props, slots }: UseTableStateParams) => {
   const editFormModel = ref<Recordable>({});
   /** 所有验证不通过的表单项 */
   const editFormErrorMsgs = ref(new Map());
+  /** 当前所有正在被编辑的行key的格式为：`${recordKey}`  */
+  const editableRowKeys = ref(new Set<Key>());
+  /** 当前所有正在被编辑的单元格key的格式为：`${recordKey}.${dataIndex}`，仅`editableType`为`cell`时有效  */
+  const editableCellKeys = ref(new Set<Key>());
 
   if (!Object.is(props.pagination, false)) {
     paginationRef.value = {
@@ -73,11 +77,34 @@ export const useTableState = ({ props, slots }: UseTableStateParams) => {
   });
 
   // 如果外界设置了dataSource，那就直接用外界提供的数据
-  watchEffect(() => {
-    if (props.dataSource) {
-      tableData.value = props.dataSource;
-    }
-  });
+  watch(
+    () => props.dataSource,
+    (val) => {
+      if (val) {
+        tableData.value = val;
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+
+  watch(
+    () => props.columns,
+    (val) => {
+      if (val) {
+        innerPropsRef.value = {
+          ...innerPropsRef.value,
+          columns: val,
+        };
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 
   return {
     tableRef,
@@ -91,5 +118,7 @@ export const useTableState = ({ props, slots }: UseTableStateParams) => {
     paginationRef,
     editFormModel,
     editFormErrorMsgs,
+    editableCellKeys,
+    editableRowKeys,
   };
 };
diff --git a/src/components/core/dynamic-table/src/types/column.ts b/src/components/core/dynamic-table/src/types/column.ts
index 6ee0a1c41..82472d21e 100644
--- a/src/components/core/dynamic-table/src/types/column.ts
+++ b/src/components/core/dynamic-table/src/types/column.ts
@@ -2,34 +2,36 @@ import type { ColumnsType } from 'ant-design-vue/es/table';
 import type { FormSchema } from '@/components/core/schema-form';
 import type { ActionItem } from './tableAction';
 import type { TableActionType } from '@/components/core/dynamic-table/src/types';
+import type { DataIndex } from 'ant-design-vue/es/vc-table/interface';
 
 export type ColumnType<T> = ColumnsType<T>[number];
 
-export type CustomRenderParams<T = any> = Parameters<
-  NonNullable<ColumnType<T>['customRender']>
->[number];
+export type CustomRenderParams<T = any> = Omit<
+  Parameters<NonNullable<ColumnType<T>['customRender']>>[number],
+  'column'
+> & { column: TableColumn<T> };
 
-export type EditableConfig<T = any> = {
-  /** 可编辑表格的类型，`单行编辑` | `多行编辑` | `可编辑单元格` */
-  type: 'single' | 'multiple' | 'cell';
-  /** 传递给 Form.Item 的配置,可以配置 rules */
-  formProps?: Partial<FormSchema<T>>;
-  /** 行保存的时候 */
-  onSave?: (
-    /** 行 id，一般是唯一id */
-    key: Key,
-    /** 当前修改的行的值，只有 form 在内的会被设置 */
-    record: T,
-    /** 原始值，可以用于判断是否修改 */
-    originRow: T,
-  ) => Promise<any | void>;
-};
+// export type EditableConfig<T = any> = {
+//   /** 可编辑表格的类型，`单行编辑` | `多行编辑` | `可编辑单元格` */
+//   type: 'single' | 'multiple' | 'cell';
+//   /** 传递给 Form.Item 的配置,可以配置 rules */
+//   formProps?: Partial<FormSchema<T>>;
+//   /** 行保存的时候 */
+//   onSave?: (
+//     /** 行 id，一般是唯一id */
+//     key: Key,
+//     /** 当前修改的行的值，只有 form 在内的会被设置 */
+//     record: T,
+//     /** 原始值，可以用于判断是否修改 */
+//     originRow: T,
+//   ) => Promise<any | void>;
+// };
 
 /**
  * 表格属性
  */
 export type TableColumn<T = Recordable> = ColumnType<T> & {
-  dataIndex?: keyof T | ColumnKeyFlagType;
+  dataIndex?: keyof T | ColumnKeyFlagType | Omit<DataIndex, string>;
   /** 指定搜索的字段 */
   searchField?: string;
   /** 在查询表单中不展示此项 */
@@ -54,6 +56,8 @@ export type TableColumn<T = Recordable> = ColumnType<T> & {
   actions?: (params: CustomRenderParams<T>, action: TableActionType) => ActionItem[];
   /** 当前单元格是否允许被编辑 */
   editable?: boolean | ((params: CustomRenderParams<T>) => boolean);
+  /** 当前单元格是否默认开启编辑，仅 `editableType`为`cell`时有效 */
+  defaultEditable?: boolean;
 };
 
 export enum ColumnKeyFlag {
diff --git a/src/components/core/dynamic-table/src/types/table.ts b/src/components/core/dynamic-table/src/types/table.ts
index aa3985d30..f14cc901c 100644
--- a/src/components/core/dynamic-table/src/types/table.ts
+++ b/src/components/core/dynamic-table/src/types/table.ts
@@ -16,3 +16,26 @@ export type OnChangeCallbackParams = Parameters<NonNullable<TableProps['onChange
 
 /** 表格onChange事件回调函数 */
 export type OnChangeCallback = TableProps['onChange'];
+
+/** 编辑行类型 */
+export type EditableType = 'single' | 'multiple' | 'cell';
+
+/** 单元格保存回调 */
+export type OnSave<T = any> = (
+  /** 行 id，一般是唯一id */
+  key: Key,
+  /** 当前修改的行的值，只有 form 在内的会被设置 */
+  record: T,
+  /** 原始值，可以用于判断是否修改 */
+  originRow: T,
+) => Promise<any | void>;
+
+/** 单元格取消保存回调 */
+export type OnCancel<T = any> = (
+  /** 行 id，一般是唯一id */
+  key: Key,
+  /** 当前修改的行的值，只有 form 在内的会被设置 */
+  record: T,
+  /** 原始值，可以用于判断是否修改 */
+  originRow: T,
+) => any | void;
diff --git a/src/components/core/schema-form/src/componentMap.ts b/src/components/core/schema-form/src/componentMap.ts
index 1ca6d8423..7f96484ad 100644
--- a/src/components/core/schema-form/src/componentMap.ts
+++ b/src/components/core/schema-form/src/componentMap.ts
@@ -17,6 +17,7 @@ import {
   Slider,
   Rate,
   Divider,
+  Upload,
 } from 'ant-design-vue';
 
 const componentMap = {
@@ -42,6 +43,7 @@ const componentMap = {
   RangePicker: DatePicker.RangePicker,
   WeekPicker: DatePicker.WeekPicker,
   TimePicker,
+  Upload,
 
   Divider,
 };
diff --git a/src/components/core/schema-form/src/hooks/useForm.tsx b/src/components/core/schema-form/src/hooks/useForm.tsx
index d32458faa..59bc6c1b5 100644
--- a/src/components/core/schema-form/src/hooks/useForm.tsx
+++ b/src/components/core/schema-form/src/hooks/useForm.tsx
@@ -38,7 +38,7 @@ export function useForm(props?: Partial<SchemaFormProps>) {
         return unref(target);
       }
       if (target.value && Reflect.has(target.value, key)) {
-        return target.value[key];
+        return Reflect.get(target.value, key);
       }
       return async (...rest) => {
         const form = await getFormInstance();
diff --git a/src/components/core/schema-form/src/schema-form-item.vue b/src/components/core/schema-form/src/schema-form-item.vue
index d9ab89019..8045b960e 100644
--- a/src/components/core/schema-form/src/schema-form-item.vue
+++ b/src/components/core/schema-form/src/schema-form-item.vue
@@ -17,7 +17,6 @@
         :is="getComponent"
         v-else-if="getComponent"
         :ref="setItemRef(schema.field)"
-        :key="schema.field"
         v-bind="getComponentProps"
         v-model:[modelValueType]="modelValue"
         :allow-clear="true"
@@ -92,13 +91,18 @@
   // @ts-ignore
   const itemLabelWidthProp = useItemLabelWidth(schema, formPropsRef);
 
-  const modelValueType = computed(() => {
+  const modelValueType = computed<string>(() => {
     const { component, componentProps } = schema.value;
     if (!isFunction(componentProps) && componentProps?.vModelKey) {
       return componentProps.vModelKey;
     }
     const isCheck = isString(component) && ['Switch', 'Checkbox'].includes(component);
-    return isCheck ? 'checked' : 'value';
+    const isUpload = component === 'Upload';
+    return {
+      true: 'value',
+      [`${isCheck}`]: 'checked',
+      [`${isUpload}`]: 'file-list',
+    }['true'];
   });
 
   const getValues = computed<RenderCallbackParams>(() => {
diff --git a/src/components/core/schema-form/src/schema-form.vue b/src/components/core/schema-form/src/schema-form.vue
index 421f1531c..1cb2f6772 100644
--- a/src/components/core/schema-form/src/schema-form.vue
+++ b/src/components/core/schema-form/src/schema-form.vue
@@ -5,8 +5,8 @@
       <slot>
         <template v-for="schemaItem in formSchemasRef" :key="schemaItem.field">
           <SchemaFormItem
+            v-model:form-model="formModel"
             :schema="schemaItem"
-            :form-model="formModel"
             :table-instance="tableInstance"
           >
             <template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
diff --git a/src/components/core/schema-form/src/types/component.ts b/src/components/core/schema-form/src/types/component.ts
index 0f8ad4d34..91c2575e2 100644
--- a/src/components/core/schema-form/src/types/component.ts
+++ b/src/components/core/schema-form/src/types/component.ts
@@ -1,6 +1,8 @@
 import type { CSSProperties } from 'vue';
 import type {
   InputNumberProps,
+  InputProps,
+  SliderProps,
   SelectProps,
   CascaderProps,
   SwitchProps,
@@ -10,6 +12,10 @@ import type {
   TreeProps,
   TreeSelectProps,
   RadioGroupProps,
+  RadioProps,
+  UploadProps,
+  DatePickerProps,
+  CheckboxProps,
 } from 'ant-design-vue';
 import type { RenderCallbackParams } from './form';
 
@@ -19,6 +25,7 @@ type ColSpanType = number | string;
 
 /** 组件属性 */
 export type ComponentProps = (
+  | InputProps
   | InputNumberProps
   | SelectProps
   | CascaderProps
@@ -29,6 +36,11 @@ export type ComponentProps = (
   | TreeProps
   | TreeSelectProps
   | RadioGroupProps
+  | RadioProps
+  | UploadProps
+  | DatePickerProps
+  | CheckboxProps
+  | SliderProps
 ) & {
   /** 组件异步请求数据 */
   request?: PromiseFn<RenderCallbackParams, any>;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index a92f71fa7..97c3466b7 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,5 @@
 import { isObject } from './is';
-import type { App } from 'vue';
+import type { App, Component, Plugin } from 'vue';
 
 /**
  *
@@ -30,7 +30,7 @@ export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
   return src;
 }
 
-export const withInstall = <T>(component: T, alias?: string) => {
+export const withInstall = <T>(component: Component<T>, alias?: string) => {
   const comp = component as any;
   comp.install = (app: App) => {
     app.component(comp.name || comp.displayName, component);
diff --git a/src/utils/is/index.ts b/src/utils/is/index.ts
index 208951ac5..527dac6e1 100644
--- a/src/utils/is/index.ts
+++ b/src/utils/is/index.ts
@@ -1,6 +1,6 @@
 const toString = Object.prototype.toString;
 
-const AsyncFunction = async function () {}.constructor;
+const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
 
 export function is(val: unknown, type: string) {
   return toString.call(val) === `[object ${type}]`;
@@ -71,7 +71,7 @@ export function isFunction(val: unknown): val is Function {
 }
 
 export function isAsyncFunction(val: unknown): val is Function {
-  return val instanceof AsyncFunction || (isFunction(val) && isPromise(val));
+  return val instanceof AsyncFunction;
 }
 
 export function isBoolean(val: unknown): val is boolean {
diff --git a/src/views/demos/form/basic-form/form-schema.tsx b/src/views/demos/form/basic-form/form-schema.tsx
index dbb9eedb1..3404991b0 100644
--- a/src/views/demos/form/basic-form/form-schema.tsx
+++ b/src/views/demos/form/basic-form/form-schema.tsx
@@ -1,4 +1,5 @@
-import { Radio } from 'ant-design-vue';
+import { UploadOutlined } from '@ant-design/icons-vue';
+import { Radio, Button } from 'ant-design-vue';
 import type { FormSchema } from '@/components/core/schema-form';
 import { optionsListApi } from '@/api/demos/select';
 
@@ -491,4 +492,22 @@ export const schemas: FormSchema[] = [
       allowHalf: true,
     },
   },
+  {
+    field: 'field23',
+    component: 'Upload',
+    label: '字段23',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+    },
+    componentSlots: {
+      default: () => (
+        <Button>
+          <UploadOutlined /> Click to Upload
+        </Button>
+      ),
+    },
+  },
 ];
diff --git a/src/views/demos/tables/edit-row-table/columns.tsx b/src/views/demos/tables/edit-row-table/columns.tsx
index 639e9b417..e5c459f16 100644
--- a/src/views/demos/tables/edit-row-table/columns.tsx
+++ b/src/views/demos/tables/edit-row-table/columns.tsx
@@ -1,5 +1,6 @@
 import { debounce } from 'lodash-es';
-import { Tag, message } from 'ant-design-vue';
+import { PlusOutlined } from '@ant-design/icons-vue';
+import { Tag, Image } from 'ant-design-vue';
 import type { TableColumn } from '@/components/core/dynamic-table';
 
 import {
@@ -7,7 +8,6 @@ import {
   getClothesByGender,
   tableData,
 } from '@/views/demos/tables/search-table/columns';
-import { waitTime } from '@/utils/common';
 
 export { tableData };
 
@@ -93,6 +93,39 @@ export const columns: TableColumn<ListItemType>[] = [
       }),
     },
   },
+  {
+    title: '图片',
+    dataIndex: 'img',
+    hideInSearch: true,
+    formItemProps: {
+      component: 'Upload',
+      defaultValue: [
+        {
+          uid: '-1',
+          name: 'image.png',
+          status: 'done',
+          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        },
+      ],
+      componentProps: {
+        maxCount: 1,
+        listType: 'picture-card',
+        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+      },
+      componentSlots: ({ formModel }) => ({
+        default: () =>
+          formModel['img']?.length ? (
+            ''
+          ) : (
+            <div>
+              <PlusOutlined />
+              <div class="mt-8px">Upload</div>
+            </div>
+          ),
+      }),
+    },
+    customRender: ({ record }) => <Image width={100} src={record.img}></Image>,
+  },
   {
     title: '价格',
     align: 'center',
@@ -143,42 +176,4 @@ export const columns: TableColumn<ListItemType>[] = [
       </Tag>
     ),
   },
-  {
-    title: '操作',
-    align: 'center',
-    width: 200,
-    dataIndex: 'ACTION',
-    actions: ({ record }, action) => {
-      const { startEditable, cancelEditable, isEditable, getEditFormModel, validateRow } = action;
-      return isEditable(record.id)
-        ? [
-            {
-              label: '保存',
-              onClick: async () => {
-                const result = await validateRow(record.id);
-                message.loading({ content: '保存中...', key: record.id });
-                console.log('result', result);
-                console.log('保存', getEditFormModel(record.id));
-                await waitTime(2000);
-                cancelEditable(record.id);
-                message.success({ content: '保存成功!', key: record.id, duration: 2 });
-              },
-            },
-            {
-              label: '取消',
-              onClick: () => {
-                cancelEditable(record.id);
-              },
-            },
-          ]
-        : [
-            {
-              label: '编辑',
-              onClick: () => {
-                startEditable(record.id, record);
-              },
-            },
-          ];
-    },
-  },
 ];
diff --git a/src/views/demos/tables/edit-row-table/index.vue b/src/views/demos/tables/edit-row-table/index.vue
index 6493b3311..ab4745166 100644
--- a/src/views/demos/tables/edit-row-table/index.vue
+++ b/src/views/demos/tables/edit-row-table/index.vue
@@ -8,14 +8,17 @@
         size="small"
         bordered
         :data-request="loadData"
-        :columns="columns"
+        :columns="tableColumns"
         :editable-type="editableType"
+        :on-save="handleSave"
+        :on-cancel="handleCancelSave"
         row-key="id"
       >
         <template #toolbar>
           <Select ref="select" v-model:value="editableType">
             <Select.Option value="single">单行编辑</Select.Option>
             <Select.Option value="multiple">多行编辑</Select.Option>
+            <Select.Option value="cell">可编辑单元格</Select.Option>
           </Select>
         </template>
       </DynamicTable>
@@ -24,51 +27,89 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import { Alert, Card, Select } from 'ant-design-vue';
+  import { ref, computed } from 'vue';
+  import { Alert, Card, Select, message } from 'ant-design-vue';
   import { columns, tableData } from './columns';
-  import { useTable, type OnChangeCallbackParams } from '@/components/core/dynamic-table';
+  import type {
+    OnChangeCallbackParams,
+    EditableType,
+    OnSave,
+    OnCancel,
+  } from '@/components/core/dynamic-table';
+  import { useTable } from '@/components/core/dynamic-table';
+  import { waitTime } from '@/utils/common';
 
   defineOptions({
     name: 'EditRowTable',
   });
 
-  const [DynamicTable, dynamicTableInstance] = useTable();
+  const [DynamicTable] = useTable();
 
-  const editableType = ref('single' as const);
+  const editableType = ref<EditableType>('single');
 
   const loadData = async (
     params,
     onChangeParams: OnChangeCallbackParams,
   ): Promise<API.TableListResult> => {
     console.log('onChangeParams', onChangeParams);
+    await waitTime(500);
 
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve({
-          list: tableData,
-          ...params,
-        });
-        // 手动设置搜索表单的搜索项
-        dynamicTableInstance?.getQueryFormRef()?.updateSchema?.([
-          {
-            field: 'price',
-            componentProps: {
-              options: [
-                {
-                  label: '0-199',
-                  value: '0-199',
+    return {
+      list: tableData,
+      ...params,
+    };
+  };
+
+  const tableColumns = computed<typeof columns>(() => [
+    ...columns,
+    {
+      title: '操作',
+      align: 'center',
+      hideInTable: editableType.value === 'cell',
+      width: 200,
+      dataIndex: 'ACTION',
+      actions: ({ record }, action) => {
+        const { startEditable, cancelEditable, isEditable, getEditFormModel, validateRow } = action;
+        return isEditable(record.id)
+          ? [
+              {
+                label: '保存',
+                onClick: async () => {
+                  const result = await validateRow(record.id);
+                  message.loading({ content: '保存中...', key: record.id });
+                  console.log('result', result);
+                  console.log('保存', getEditFormModel(record.id));
+                  await waitTime(2000);
+                  cancelEditable(record.id);
+                  message.success({ content: '保存成功!', key: record.id, duration: 2 });
+                },
+              },
+              {
+                label: '取消',
+                onClick: () => {
+                  cancelEditable(record.id);
                 },
-                {
-                  label: '200-999',
-                  value: '200-999',
+              },
+            ]
+          : [
+              {
+                label: '编辑',
+                onClick: () => {
+                  startEditable(record.id, record);
                 },
-              ],
-            },
-          },
-        ]);
-      }, 500);
-    });
+              },
+            ];
+      },
+    },
+  ]);
+
+  const handleCancelSave: OnCancel = (rowKey, record, originRow) => {
+    console.log('handleCancelSave', rowKey, record, originRow);
+  };
+
+  const handleSave: OnSave = async (rowKey, record, originRow) => {
+    console.log('handleSave', rowKey, record, originRow);
+    await waitTime(2000);
   };
 </script>
 
diff --git a/src/views/demos/tables/search-table/columns.tsx b/src/views/demos/tables/search-table/columns.tsx
index e306bae50..b433a396f 100644
--- a/src/views/demos/tables/search-table/columns.tsx
+++ b/src/views/demos/tables/search-table/columns.tsx
@@ -57,6 +57,7 @@ export const tableData = Array.from({ length: 30 }).map((_, i) => {
     clothes: getClothesByGender(gender)[~~(Math.random() * 2)].label,
     price: ~~(Math.random() * 1000),
     gender,
+    img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
     status: ~~(Math.random() * 2),
   };
 });
diff --git a/yarn.lock b/yarn.lock
index 14bd06a8b..7fc048905 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -973,15 +973,15 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@commitlint/cli@~17.0.3":
-  version "17.0.3"
-  resolved "https://registry.npmmirror.com/@commitlint/cli/-/cli-17.0.3.tgz#50be9d9a8d79f6c47bfd2703638fe65215eb2526"
-  integrity sha512-oAo2vi5d8QZnAbtU5+0cR2j+A7PO8zuccux65R/EycwvsZrDVyW518FFrnJK2UQxbRtHFFIG+NjQ6vOiJV0Q8A==
+"@commitlint/cli@~17.1.1":
+  version "17.1.1"
+  resolved "https://registry.npmmirror.com/@commitlint/cli/-/cli-17.1.1.tgz#994e91a873aea2bcb53dfa3225ffce2c9022fd3e"
+  integrity sha512-xyQJNJs1j18At5wSBF6bMo1on6ZrpcHUr4duacznPU0RnywCAABDBP1s63BmhkTMdNXLVgVM4J1H2sG0HSS3IA==
   dependencies:
     "@commitlint/format" "^17.0.0"
-    "@commitlint/lint" "^17.0.3"
-    "@commitlint/load" "^17.0.3"
-    "@commitlint/read" "^17.0.0"
+    "@commitlint/lint" "^17.1.0"
+    "@commitlint/load" "^17.1.1"
+    "@commitlint/read" "^17.1.0"
     "@commitlint/types" "^17.0.0"
     execa "^5.0.0"
     lodash "^4.17.19"
@@ -989,17 +989,17 @@
     resolve-global "1.0.0"
     yargs "^17.0.0"
 
-"@commitlint/config-conventional@~17.0.3":
-  version "17.0.3"
-  resolved "https://registry.npmmirror.com/@commitlint/config-conventional/-/config-conventional-17.0.3.tgz#61e937357ce63ea08a2017e58b918748fcf3abc5"
-  integrity sha512-HCnzTm5ATwwwzNVq5Y57poS0a1oOOcd5pc1MmBpLbGmSysc4i7F/++JuwtdFPu16sgM3H9J/j2zznRLOSGVO2A==
+"@commitlint/config-conventional@~17.1.0":
+  version "17.1.0"
+  resolved "https://registry.npmmirror.com/@commitlint/config-conventional/-/config-conventional-17.1.0.tgz#9bd852766e08842bfe0fe4deb40e152eb718ec1b"
+  integrity sha512-WU2p0c9/jLi8k2q2YrDV96Y8XVswQOceIQ/wyJvQxawJSCasLdRB3kUIYdNjOCJsxkpoUlV/b90ZPxp1MYZDiA==
   dependencies:
     conventional-changelog-conventionalcommits "^5.0.0"
 
-"@commitlint/config-validator@^17.0.3":
-  version "17.0.3"
-  resolved "https://registry.npmmirror.com/@commitlint/config-validator/-/config-validator-17.0.3.tgz#5d1ec17eece1f85a0d06c05d168a039b313eb5d7"
-  integrity sha512-3tLRPQJKapksGE7Kee9axv+9z5I2GDHitDH4q63q7NmNA0wkB+DAorJ0RHz2/K00Zb1/MVdHzhCga34FJvDihQ==
+"@commitlint/config-validator@^17.1.0":
+  version "17.1.0"
+  resolved "https://registry.npmmirror.com/@commitlint/config-validator/-/config-validator-17.1.0.tgz#51d09ca53d7a0d19736abf34eb18a66efce0f97a"
+  integrity sha512-Q1rRRSU09ngrTgeTXHq6ePJs2KrI+axPTgkNYDWSJIuS1Op4w3J30vUfSXjwn5YEJHklK3fSqWNHmBhmTR7Vdg==
   dependencies:
     "@commitlint/types" "^17.0.0"
     ajv "^8.11.0"
@@ -1025,37 +1025,37 @@
     "@commitlint/types" "^17.0.0"
     chalk "^4.1.0"
 
-"@commitlint/is-ignored@^17.0.3":
-  version "17.0.3"
-  resolved "https://registry.npmmirror.com/@commitlint/is-ignored/-/is-ignored-17.0.3.tgz#0e1c725c1e50aea5852fb1260bc92b2ee1856425"
-  integrity sha512-/wgCXAvPtFTQZxsVxj7owLeRf5wwzcXLaYmrZPR4a87iD4sCvUIRl1/ogYrtOyUmHwWfQsvjqIB4mWE/SqWSnA==
+"@commitlint/is-ignored@^17.1.0":
+  version "17.1.0"
+  resolved "https://registry.npmmirror.com/@commitlint/is-ignored/-/is-ignored-17.1.0.tgz#c9d5ca22679fdc657fff33a8aa23e0c0152ebbd1"
+  integrity sha512-JITWKDMHhIh8IpdIbcbuH9rEQJty1ZWelgjleTFrVRAcEwN/sPzk1aVUXRIZNXMJWbZj8vtXRJnFihrml8uECQ==
   dependencies:
     "@commitlint/types" "^17.0.0"
     semver "7.3.7"
 
-"@commitlint/lint@^17.0.3":
-  version "17.0.3"
-  resolved "https://registry.npmmirror.com/@commitlint/lint/-/lint-17.0.3.tgz#98542a48f03b5c144309e24cbe1c032366ea75e2"
-  integrity sha512-2o1fk7JUdxBUgszyt41sHC/8Nd5PXNpkmuOo9jvGIjDHzOwXyV0PSdbEVTH3xGz9NEmjohFHr5l+N+T9fcxong==
+"@commitlint/lint@^17.1.0":
+  version "17.1.0"
+  resolved "https://registry.npmmirror.com/@commitlint/lint/-/lint-17.1.0.tgz#de2d3baa2b20d9ec3d5fd2f2421f6025c8439630"
+  integrity sha512-ltpqM2ogt/+SDhUaScFo0MdscncEF96lvQTPMM/VTTWlw7sTGLLWkOOppsee2MN/uLNNWjQ7kqkd4h6JqoM9AQ==
   dependencies:
-    "@commitlint/is-ignored" "^17.0.3"
+    "@commitlint/is-ignored" "^17.1.0"
     "@commitlint/parse" "^17.0.0"
     "@commitlint/rules" "^17.0.0"
     "@commitlint/types" "^17.0.0"
 
-"@commitlint/load@^17.0.3":
-  version "17.0.3"
-  resolved "https://registry.npmmirror.com/@commitlint/load/-/load-17.0.3.tgz#683aa484a5515714512e442f2f4b11f75e66097a"
-  integrity sha512-3Dhvr7GcKbKa/ey4QJ5MZH3+J7QFlARohUow6hftQyNjzoXXROm+RwpBes4dDFrXG1xDw9QPXA7uzrOShCd4bw==
+"@commitlint/load@^17.1.1":
+  version "17.1.1"
+  resolved "https://registry.npmmirror.com/@commitlint/load/-/load-17.1.1.tgz#16f945d2cc4a5d4d75cccc3d7df8066ff152024b"
+  integrity sha512-jEgdDabfj58kFKZmB7rMtmQa7Feo7Ozh3KmvIlXWqrJmal5auO1RC0Iczfl52DlPn26Uo0goUDHrhoAFs2ze0Q==
   dependencies:
-    "@commitlint/config-validator" "^17.0.3"
+    "@commitlint/config-validator" "^17.1.0"
     "@commitlint/execute-rule" "^17.0.0"
-    "@commitlint/resolve-extends" "^17.0.3"
+    "@commitlint/resolve-extends" "^17.1.0"
     "@commitlint/types" "^17.0.0"
-    "@types/node" ">=12"
+    "@types/node" "^14.0.0"
     chalk "^4.1.0"
     cosmiconfig "^7.0.0"
-    cosmiconfig-typescript-loader "^2.0.0"
+    cosmiconfig-typescript-loader "^3.0.0"
     lodash "^4.17.19"
     resolve-from "^5.0.0"
     typescript "^4.6.4"
@@ -1074,22 +1074,23 @@
     conventional-changelog-angular "^5.0.11"
     conventional-commits-parser "^3.2.2"
 
-"@commitlint/read@^17.0.0":
-  version "17.0.0"
-  resolved "https://registry.npmmirror.com/@commitlint/read/-/read-17.0.0.tgz#8ab01cf2f27350d8f81f21690962679a7cae5abf"
-  integrity sha512-zkuOdZayKX3J6F6mPnVMzohK3OBrsEdOByIqp4zQjA9VLw1hMsDEFQ18rKgUc2adkZar+4S01QrFreDCfZgbxA==
+"@commitlint/read@^17.1.0":
+  version "17.1.0"
+  resolved "https://registry.npmmirror.com/@commitlint/read/-/read-17.1.0.tgz#cf6bab410180f32f70891c97b15467c0b92ac14f"
+  integrity sha512-73BoFNBA/3Ozo2JQvGsE0J8SdrJAWGfZQRSHqvKaqgmY042Su4gXQLqvAzgr55S9DI1l9TiU/5WDuh8IE86d/g==
   dependencies:
     "@commitlint/top-level" "^17.0.0"
     "@commitlint/types" "^17.0.0"
     fs-extra "^10.0.0"
     git-raw-commits "^2.0.0"
+    minimist "^1.2.6"
 
-"@commitlint/resolve-extends@^17.0.3":
-  version "17.0.3"
-  resolved "https://registry.npmmirror.com/@commitlint/resolve-extends/-/resolve-extends-17.0.3.tgz#43b237899e2abd59d16af091521b888c8a071412"
-  integrity sha512-H/RFMvrcBeJCMdnVC4i8I94108UDccIHrTke2tyQEg9nXQnR5/Hd6MhyNWkREvcrxh9Y+33JLb+PiPiaBxCtBA==
+"@commitlint/resolve-extends@^17.1.0":
+  version "17.1.0"
+  resolved "https://registry.npmmirror.com/@commitlint/resolve-extends/-/resolve-extends-17.1.0.tgz#7cf04fa13096c8a6544a4af13321fdf8d0d50694"
+  integrity sha512-jqKm00LJ59T0O8O4bH4oMa4XyJVEOK4GzH8Qye9XKji+Q1FxhZznxMV/bDLyYkzbTodBt9sL0WLql8wMtRTbqQ==
   dependencies:
-    "@commitlint/config-validator" "^17.0.3"
+    "@commitlint/config-validator" "^17.1.0"
     "@commitlint/types" "^17.0.0"
     import-fresh "^3.0.0"
     lodash "^4.17.19"
@@ -1143,14 +1144,14 @@
   resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz#75b4c27948c81e88ccd3a8902047bcd797f38d32"
   integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
 
-"@eslint/eslintrc@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
-  integrity sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==
+"@eslint/eslintrc@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-1.3.1.tgz#de0807bfeffc37b964a7d0400e0c348ce5a2543d"
+  integrity sha512-OhSY22oQQdw3zgPOOwdoj01l/Dzl1Z+xyUP33tkSN+aqyEhymJCcPHyXt+ylW8FSe0TfRC2VG+ROQOapD0aZSQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.3.2"
+    espree "^9.4.0"
     globals "^13.15.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
@@ -1184,6 +1185,11 @@
   resolved "https://registry.npmmirror.com/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz#316b0a63b91c10e53f242efb4ace5c3b34e8728d"
   integrity sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==
 
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
 "@humanwhocodes/object-schema@^1.2.1":
   version "1.2.1"
   resolved "https://registry.npmmirror.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
@@ -1528,11 +1534,16 @@
   resolved "https://registry.npmmirror.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
-"@types/node@*", "@types/node@>=12", "@types/node@~18.7.13":
+"@types/node@*", "@types/node@~18.7.13":
   version "18.7.13"
   resolved "https://registry.npmmirror.com/@types/node/-/node-18.7.13.tgz#23e6c5168333480d454243378b69e861ab5c011a"
   integrity sha512-46yIhxSe5xEaJZXWdIBP7GU4HDTG8/eo0qd9atdiL+lFpA03y8KS+lkTN834TWJj5767GbWv4n/P6efyTFt1Dw==
 
+"@types/node@^14.0.0":
+  version "14.18.26"
+  resolved "https://registry.npmmirror.com/@types/node/-/node-14.18.26.tgz#239e19f8b4ea1a9eb710528061c1d733dc561996"
+  integrity sha512-0b+utRBSYj8L7XAp0d+DX7lI4cSmowNaaTkk6/1SKzbKkG+doLuPusB9EOvzLJ8ahJSk03bTLIL6cWaEd4dBKA==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -1597,7 +1608,7 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@^5.0.0", "@typescript-eslint/eslint-plugin@~5.34.0":
+"@typescript-eslint/eslint-plugin@^5.0.0":
   version "5.34.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.34.0.tgz#d690f60e335596f38b01792e8f4b361d9bd0cb35"
   integrity sha512-eRfPPcasO39iwjlUAMtjeueRGuIrW3TQ9WseIDl7i5UWuFbf83yYaU7YPs4j8+4CxUMIsj1k+4kV+E+G+6ypDQ==
@@ -1612,7 +1623,22 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/parser@^5.0.0", "@typescript-eslint/parser@~5.34.0":
+"@typescript-eslint/eslint-plugin@~5.35.1":
+  version "5.35.1"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.35.1.tgz#0d822bfea7469904dfc1bb8f13cabd362b967c93"
+  integrity sha512-RBZZXZlI4XCY4Wzgy64vB+0slT9+yAPQRjj/HSaRwUot33xbDjF1oN9BLwOLTewoOI0jothIltZRe9uJCHf8gg==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.35.1"
+    "@typescript-eslint/type-utils" "5.35.1"
+    "@typescript-eslint/utils" "5.35.1"
+    debug "^4.3.4"
+    functional-red-black-tree "^1.0.1"
+    ignore "^5.2.0"
+    regexpp "^3.2.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/parser@^5.0.0":
   version "5.34.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-5.34.0.tgz#ca710858ea85dbfd30c9b416a335dc49e82dbc07"
   integrity sha512-SZ3NEnK4usd2CXkoV3jPa/vo1mWX1fqRyIVUQZR4As1vyp4fneknBNJj+OFtV8WAVgGf+rOHMSqQbs2Qn3nFZQ==
@@ -1622,6 +1648,16 @@
     "@typescript-eslint/typescript-estree" "5.34.0"
     debug "^4.3.4"
 
+"@typescript-eslint/parser@~5.35.1":
+  version "5.35.1"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-5.35.1.tgz#bf2ee2ebeaa0a0567213748243fb4eec2857f04f"
+  integrity sha512-XL2TBTSrh3yWAsMYpKseBYTVpvudNf69rPOWXWVBI08My2JVT5jR66eTt4IgQFHA/giiKJW5dUD4x/ZviCKyGg==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.35.1"
+    "@typescript-eslint/types" "5.35.1"
+    "@typescript-eslint/typescript-estree" "5.35.1"
+    debug "^4.3.4"
+
 "@typescript-eslint/scope-manager@5.34.0":
   version "5.34.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-5.34.0.tgz#14efd13dc57602937e25f188fd911f118781e527"
@@ -1630,6 +1666,14 @@
     "@typescript-eslint/types" "5.34.0"
     "@typescript-eslint/visitor-keys" "5.34.0"
 
+"@typescript-eslint/scope-manager@5.35.1":
+  version "5.35.1"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-5.35.1.tgz#ccb69d54b7fd0f2d0226a11a75a8f311f525ff9e"
+  integrity sha512-kCYRSAzIW9ByEIzmzGHE50NGAvAP3wFTaZevgWva7GpquDyFPFcmvVkFJGWJJktg/hLwmys/FZwqM9EKr2u24Q==
+  dependencies:
+    "@typescript-eslint/types" "5.35.1"
+    "@typescript-eslint/visitor-keys" "5.35.1"
+
 "@typescript-eslint/type-utils@5.34.0":
   version "5.34.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-5.34.0.tgz#7a324ab9ddd102cd5e1beefc94eea6f3eb32d32d"
@@ -1639,11 +1683,25 @@
     debug "^4.3.4"
     tsutils "^3.21.0"
 
+"@typescript-eslint/type-utils@5.35.1":
+  version "5.35.1"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-5.35.1.tgz#d50903b56758c5c8fc3be52b3be40569f27f9c4a"
+  integrity sha512-8xT8ljvo43Mp7BiTn1vxLXkjpw8wS4oAc00hMSB4L1/jIiYbjjnc3Qp2GAUOG/v8zsNCd1qwcqfCQ0BuishHkw==
+  dependencies:
+    "@typescript-eslint/utils" "5.35.1"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/types@5.34.0":
   version "5.34.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/types/-/types-5.34.0.tgz#217bf08049e9e7b86694d982e88a2c1566330c78"
   integrity sha512-49fm3xbbUPuzBIOcy2CDpYWqy/X7VBkxVN+DC21e0zIm3+61Z0NZi6J9mqPmSW1BDVk9FIOvuCFyUPjXz93sjA==
 
+"@typescript-eslint/types@5.35.1":
+  version "5.35.1"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/types/-/types-5.35.1.tgz#af355fe52a0cc88301e889bc4ada72f279b63d61"
+  integrity sha512-FDaujtsH07VHzG0gQ6NDkVVhi1+rhq0qEvzHdJAQjysN+LHDCKDKCBRlZFFE0ec0jKxiv0hN63SNfExy0KrbQQ==
+
 "@typescript-eslint/typescript-estree@5.34.0":
   version "5.34.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.34.0.tgz#ba7b83f4bf8ccbabf074bbf1baca7a58de3ccb9a"
@@ -1657,6 +1715,19 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@5.35.1":
+  version "5.35.1"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.35.1.tgz#db878a39a0dbdc9bb133f11cdad451770bfba211"
+  integrity sha512-JUqE1+VRTGyoXlDWWjm6MdfpBYVq+hixytrv1oyjYIBEOZhBCwtpp5ZSvBt4wIA1MKWlnaC2UXl2XmYGC3BoQA==
+  dependencies:
+    "@typescript-eslint/types" "5.35.1"
+    "@typescript-eslint/visitor-keys" "5.35.1"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/utils@5.34.0":
   version "5.34.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-5.34.0.tgz#0cae98f48d8f9e292e5caa9343611b6faf49e743"
@@ -1669,6 +1740,18 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
+"@typescript-eslint/utils@5.35.1":
+  version "5.35.1"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-5.35.1.tgz#ae1399afbfd6aa7d0ed1b7d941e9758d950250eb"
+  integrity sha512-v6F8JNXgeBWI4pzZn36hT2HXXzoBBBJuOYvoQiaQaEEjdi5STzux3Yj8v7ODIpx36i/5s8TdzuQ54TPc5AITQQ==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.35.1"
+    "@typescript-eslint/types" "5.35.1"
+    "@typescript-eslint/typescript-estree" "5.35.1"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
 "@typescript-eslint/visitor-keys@5.34.0":
   version "5.34.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.34.0.tgz#d0fb3e31033e82ddd5de048371ad39eb342b2d40"
@@ -1677,46 +1760,56 @@
     "@typescript-eslint/types" "5.34.0"
     eslint-visitor-keys "^3.3.0"
 
-"@volar/code-gen@0.40.1":
-  version "0.40.1"
-  resolved "https://registry.npmmirror.com/@volar/code-gen/-/code-gen-0.40.1.tgz#30637162626bd2ea6e3c3c3cedab291494870c25"
-  integrity sha512-mN1jn08wRKLoUj+KThltyWfsiEGt6Um1yT6S7bkruwV76yiLlzIR4WZgWng254byGMozJ00qgkZmBhraD5b48A==
+"@typescript-eslint/visitor-keys@5.35.1":
+  version "5.35.1"
+  resolved "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.35.1.tgz#285e9e34aed7c876f16ff646a3984010035898e6"
+  integrity sha512-cEB1DvBVo1bxbW/S5axbGPE6b7FIMAbo3w+AGq6zNDA7+NYJOIkKj/sInfTv4edxd4PxJSgdN4t6/pbvgA+n5g==
+  dependencies:
+    "@typescript-eslint/types" "5.35.1"
+    eslint-visitor-keys "^3.3.0"
+
+"@volar/code-gen@0.40.2":
+  version "0.40.2"
+  resolved "https://registry.npmmirror.com/@volar/code-gen/-/code-gen-0.40.2.tgz#867f466bf3388676b6e44ff5ef027dd14e0ade92"
+  integrity sha512-1Z08SJkJOdQiXYdDpwOynLz/grL50uENz65qmQLpgaN12WiekkdWqeFOZSlB9FbWgB686wBnlAV8sxUqWtoSmA==
   dependencies:
-    "@volar/source-map" "0.40.1"
+    "@volar/source-map" "0.40.2"
 
-"@volar/source-map@0.40.1":
-  version "0.40.1"
-  resolved "https://registry.npmmirror.com/@volar/source-map/-/source-map-0.40.1.tgz#9fcefb21ce0e0ca272f76129b6a98b6f08f4debb"
-  integrity sha512-ORYg5W+R4iT2k/k2U4ASkKvDxabIzKtP+lXZ1CcqFIbTF81GOooAv5tJZImf8ifhUV9p8bgGaitFj/VnNzkdYg==
+"@volar/source-map@0.40.2":
+  version "0.40.2"
+  resolved "https://registry.npmmirror.com/@volar/source-map/-/source-map-0.40.2.tgz#47923524fee4f75eb357fac026469a5a1c87367d"
+  integrity sha512-gXH4hXq1rbi4h6KekZvFekSescKguMRWDMkvRGXwu/3IL24BEMxWIqmTazAHsHO/yR1gN4nz/iMFoEX5f0n20Q==
+  dependencies:
+    "@vue/reactivity" "3.2.37"
 
-"@volar/typescript-faster@0.40.1":
-  version "0.40.1"
-  resolved "https://registry.npmmirror.com/@volar/typescript-faster/-/typescript-faster-0.40.1.tgz#99a37f0386934d971b71586ee0dcdd20b3537d90"
-  integrity sha512-UiX8OzVRJtpudGfTY2KgB5m78DIA8oVbwI4QN5i4Ot8oURQPOviH7MahikHeeXidbh3iOy/u4vceMb+mfdizpQ==
+"@volar/typescript-faster@0.40.2":
+  version "0.40.2"
+  resolved "https://registry.npmmirror.com/@volar/typescript-faster/-/typescript-faster-0.40.2.tgz#3299388d2135de197cd3b17e4fc29d36471682cf"
+  integrity sha512-IqGpDz5azIlMIgpY50KreJe0kfFWKXiI2Aj3+psabG9qmZS86T898lk2abh0U7+G0fWnQUApic0/aqthxN999g==
   dependencies:
     semver "^7.3.7"
 
-"@volar/vue-language-core@0.40.1":
-  version "0.40.1"
-  resolved "https://registry.npmmirror.com/@volar/vue-language-core/-/vue-language-core-0.40.1.tgz#a11429b59351202af1a89167039a07b4bffbcefc"
-  integrity sha512-RBU2nQkj+asKZ/ht3sU3hTau+dGuTjJrQS3nNSw4+vnwUJnN/WogO/MmgKdrvVf3pUdLiucIog1E/Us1C8Y5wg==
+"@volar/vue-language-core@0.40.2":
+  version "0.40.2"
+  resolved "https://registry.npmmirror.com/@volar/vue-language-core/-/vue-language-core-0.40.2.tgz#ffe7d88179ec4f4ec8fdde64a97b345573fc5e15"
+  integrity sha512-faJZFOuJEVxe97pNaTofVnICAZ01AVsnwt5dhkxK2hIgeKfY1R2hs8NVetqPRpWgh1IVwN/FZEfbaHvNkXbgCQ==
   dependencies:
-    "@volar/code-gen" "0.40.1"
-    "@volar/source-map" "0.40.1"
+    "@volar/code-gen" "0.40.2"
+    "@volar/source-map" "0.40.2"
     "@vue/compiler-core" "^3.2.37"
     "@vue/compiler-dom" "^3.2.37"
     "@vue/compiler-sfc" "^3.2.37"
     "@vue/reactivity" "^3.2.37"
     "@vue/shared" "^3.2.37"
 
-"@volar/vue-typescript@0.40.1":
-  version "0.40.1"
-  resolved "https://registry.npmmirror.com/@volar/vue-typescript/-/vue-typescript-0.40.1.tgz#5c6e9dd6a5a5e9ec47c90c70c98d2c97f1e8a20d"
-  integrity sha512-58nW/Xwy7VBkeIPmbyEmi/j1Ta2HxGl/5aFiEEpWxoas7vI1AM+txz8+MhWho4ZMw0w0eCqPtGgugD2rr+/v7w==
+"@volar/vue-typescript@0.40.2":
+  version "0.40.2"
+  resolved "https://registry.npmmirror.com/@volar/vue-typescript/-/vue-typescript-0.40.2.tgz#60b35457c64896b1be138d5bf553cd21c73ed5c9"
+  integrity sha512-5lpzur3lyHMeNbITNUqNKDdELTeQJydB6D4XiTLsjRHY70mSDHJgXThkxHvVcNDWY+KJqLiTGeKmJvdTozkobg==
   dependencies:
-    "@volar/code-gen" "0.40.1"
-    "@volar/typescript-faster" "0.40.1"
-    "@volar/vue-language-core" "0.40.1"
+    "@volar/code-gen" "0.40.2"
+    "@volar/typescript-faster" "0.40.2"
+    "@volar/vue-language-core" "0.40.2"
 
 "@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
   version "1.2.1"
@@ -3449,23 +3542,25 @@ core-js-compat@^3.21.0, core-js-compat@^3.22.1, core-js-compat@^3.8.3:
     browserslist "^4.21.3"
     semver "7.0.0"
 
-core-js@^3.15.1, core-js@^3.8.3, core-js@~3.24.1:
+core-js@^3.15.1, core-js@^3.8.3:
   version "3.24.1"
   resolved "https://registry.npmmirror.com/core-js/-/core-js-3.24.1.tgz#cf7724d41724154010a6576b7b57d94c5d66e64f"
   integrity sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg==
 
+core-js@~3.25.0:
+  version "3.25.0"
+  resolved "https://registry.npmmirror.com/core-js/-/core-js-3.25.0.tgz#be71d9e0dd648ffd70c44a7ec2319d039357eceb"
+  integrity sha512-CVU1xvJEfJGhyCpBrzzzU1kjCfgsGUxhEvwUV2e/cOedYWHdmluamx+knDnmhqALddMG16fZvIqvs9aijsHHaA==
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cosmiconfig-typescript-loader@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.npmmirror.com/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-2.0.2.tgz#7e7ce6064af041c910e1e43fb0fd9625cee56e93"
-  integrity sha512-KmE+bMjWMXJbkWCeY4FJX/npHuZPNr9XF9q9CIQ/bpFwi1qHfCmSiKarrCcRa0LO4fWjk93pVoeRtJAkTGcYNw==
-  dependencies:
-    cosmiconfig "^7"
-    ts-node "^10.8.1"
+cosmiconfig-typescript-loader@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.npmmirror.com/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.1.2.tgz#e147457854cabe1416152bdca55f53449b1f865d"
+  integrity sha512-rIwakk27LtK7vjSjGgs3FDbKkq41Byw3VHRGRuAkRQLfGla+O7s+cy1FXRkjLSZ2G9z1og1bcOIsELo1w4G0Kg==
 
 cosmiconfig@^6.0.0:
   version "6.0.0"
@@ -3478,7 +3573,7 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-cosmiconfig@^7, cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
+cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
   integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
@@ -4277,14 +4372,15 @@ eslint-webpack-plugin@^3.1.0:
     normalize-path "^3.0.0"
     schema-utils "^4.0.0"
 
-eslint@~8.22.0:
-  version "8.22.0"
-  resolved "https://registry.npmmirror.com/eslint/-/eslint-8.22.0.tgz#78fcb044196dfa7eef30a9d65944f6f980402c48"
-  integrity sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==
+eslint@~8.23.0:
+  version "8.23.0"
+  resolved "https://registry.npmmirror.com/eslint/-/eslint-8.23.0.tgz#a184918d288820179c6041bb3ddcc99ce6eea040"
+  integrity sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA==
   dependencies:
-    "@eslint/eslintrc" "^1.3.0"
+    "@eslint/eslintrc" "^1.3.1"
     "@humanwhocodes/config-array" "^0.10.4"
     "@humanwhocodes/gitignore-to-minimatch" "^1.0.2"
+    "@humanwhocodes/module-importer" "^1.0.1"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -4294,7 +4390,7 @@ eslint@~8.22.0:
     eslint-scope "^7.1.1"
     eslint-utils "^3.0.0"
     eslint-visitor-keys "^3.3.0"
-    espree "^9.3.3"
+    espree "^9.4.0"
     esquery "^1.4.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
@@ -4320,9 +4416,8 @@ eslint@~8.22.0:
     strip-ansi "^6.0.1"
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
 
-espree@^9.3.1, espree@^9.3.2, espree@^9.3.3:
+espree@^9.3.1:
   version "9.3.3"
   resolved "https://registry.npmmirror.com/espree/-/espree-9.3.3.tgz#2dd37c4162bb05f433ad3c1a52ddf8a49dc08e9d"
   integrity sha512-ORs1Rt/uQTqUKjDdGCyrtYxbazf5umATSf/K4qxjmZHORR6HJk+2s/2Pqe+Kk49HHINC/xNIrGfgh8sZcll0ng==
@@ -4331,6 +4426,15 @@ espree@^9.3.1, espree@^9.3.2, espree@^9.3.3:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.3.0"
 
+espree@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.npmmirror.com/espree/-/espree-9.4.0.tgz#cd4bc3d6e9336c433265fc0aa016fc1aaf182f8a"
+  integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
+  dependencies:
+    acorn "^8.8.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.3.0"
+
 esquery@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmmirror.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
@@ -6979,10 +7083,10 @@ pify@^4.0.1:
   resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pinia@~2.0.20:
-  version "2.0.20"
-  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.20.tgz#3b7f1a5a660282fab6a0c83bae62c48ee0b1bc1f"
-  integrity sha512-fdHHumXW/0U5HhxmY1emo3I4z85p8NJPdbtFQSlmJXFe3ktuF0pYNVgVtk2q+j2zCtTufY763xzaEMx0t6T59g==
+pinia@~2.0.21:
+  version "2.0.21"
+  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.21.tgz#2a6599ad3736fa71866f4b053ffb0073cd482270"
+  integrity sha512-6ol04PtL29O0Z6JHI47O3JUSoyOJ7Og0rstXrHVMZSP4zAldsQBXJCNF0i/H7m8vp/Hjd/CSmuPl7C5QAwpeWQ==
   dependencies:
     "@vue/devtools-api" "^6.2.1"
     vue-demi "*"
@@ -8794,7 +8898,7 @@ ts-loader@^9.2.5:
     micromatch "^4.0.0"
     semver "^7.3.4"
 
-ts-node@^10.8.1:
+ts-node@^10.9.1:
   version "10.9.1"
   resolved "https://registry.npmmirror.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b"
   integrity sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==
@@ -9037,7 +9141,7 @@ v8-compile-cache-lib@^3.0.1:
   resolved "https://registry.npmmirror.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
-v8-compile-cache@^2.0.3, v8-compile-cache@^2.3.0:
+v8-compile-cache@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
@@ -9125,13 +9229,13 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue-tsc@^0.40.1:
-  version "0.40.1"
-  resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-0.40.1.tgz#96470c63d47d060178639d08ac18f1b1f8834d2c"
-  integrity sha512-Z+3rlp/6TrtKvLuaFYwBn03zrdinMR6lBb3mWBJtDA+KwlRu+I4eMoqC1qT9D7i/29u0Bw58dH7ErjMpNLN9bQ==
+vue-tsc@^0.40.2:
+  version "0.40.2"
+  resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-0.40.2.tgz#31f81bf08abe2be85071174d78c0588908092b47"
+  integrity sha512-TEJZZRD0bdf3n1AfSWL8Eg4R28Wp0vv3mOtISl0Eh6Wdp/Zt1Qs9VgbNh+UfHUukorMB34FHsoVliiGBm2bhTw==
   dependencies:
-    "@volar/vue-language-core" "0.40.1"
-    "@volar/vue-typescript" "0.40.1"
+    "@volar/vue-language-core" "0.40.2"
+    "@volar/vue-typescript" "0.40.2"
 
 vue-types@^3.0.0:
   version "3.0.2"