@enableai-base/table 1.0.0

package/dist/table.esm-bundler.mjs

@@ -0,0 +1,4292 @@
+/**
+* @enableai-base/table v1.0.0
+* (c) 2024-present Enableai
+* @license Proprietary
+**/
+import React, { useRef, useImperativeHandle, useMemo, useState, useCallback, useEffect } from 'react';
+import { createContextWithProvider } from '@enableai-sdk-common/react-hooks';
+import { DEFAULT_FONT_SIZE, HEADER_FONT_SIZE, COLOR_BG_CELL, BORDER_LINE_WIDTH, BORDER_COLOR, COLOR_BORDER_SELECTION, CUSTOM_STYLE_LIST, COLOR_BG_CELL_HOVER, CUSTOM_CELL_STYLE_FEEDBACK_ERROR, COLOR_LINK, CUSTOM_CELL_STYLE_HIGHLIGHT_FOCUS, TOOL_ICON, TABLE_DEFAULT_ROW_HEIGHT, CUSTOM_CELL_STYLE, CUSTOM_CELL_FOCUS_STYLE, CUSTOM_CELL_FEEDBACK_ERROR_STYLE, COLOR_ICON, formatValue, getColorByStr, formatDuration } from '@enableai-base/core';
+import { isMatch, mergeWith, castArray, isNil, clone, clamp, max, min, cloneDeep } from 'lodash';
+import { createGroup, createImage, createText, VGroup, VText, createRect } from '@visactor/vtable/es/vrender';
+import { getTextColorForBackground } from '@enableai-sdk-common/color';
+import { getUUID } from '@enableai-sdk-common/id';
+import { createAtomStore } from '@enableai-sdk-common/store';
+import { atom } from 'jotai';
+import { Command, getCommandManager, startTransaction, stopTransaction } from '@enableai-sdk-common/command';
+import { EnableAIBaseFontIcon } from '@enableai-fonts/font-icon-enableai-base';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { Popover, DatePicker, Form, Input, Flex, Space, Button, InputNumber, Dropdown } from 'antd';
+import { JsonEditor, TableMenuModal } from '@enableai-base/grid-layout';
+import { LinkOutlined } from '@ant-design/icons';
+import { Select, AvatarPopoverContent } from '@enableai-base/ui';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { DestroyClass } from '@enableai-sdk-common/core';
+import * as VTable from '@visactor/vtable';
+import { ListTable } from '@visactor/vtable';
+import * as VTable_editors from '@visactor/vtable-editors';
+import { ValidateEnum } from '@visactor/vtable-editors';
+
+const theme = {
+  selectionStyle: {
+    cellBorderColor: COLOR_BORDER_SELECTION,
+    cellBgColor: "rgba(255,255,255, 0.1)"
+  },
+  frameStyle: {
+    borderLineWidth: BORDER_LINE_WIDTH,
+    // 全局边框宽度
+    borderColor: BORDER_COLOR
+    // 全局边框颜色 最外面的方框
+  },
+  cellInnerBorder: true,
+  // 禁用内边框隐藏逻辑
+  defaultStyle: {
+    fontSize: DEFAULT_FONT_SIZE,
+    borderColor: BORDER_COLOR,
+    borderLineWidth: BORDER_LINE_WIDTH,
+    bgColor: COLOR_BG_CELL,
+    hover: {
+      // CustomCellStyle 设置的样式优先级更高
+      // TODO 感觉会变卡，后续优化，将样式设置属性放在 item 数据里面驱动控制
+      cellBgColor: ({ table, row, col }) => {
+        const cellStyle = table.getCellStyle(col, row);
+        const matched = CUSTOM_STYLE_LIST.filter((item) => isMatch(cellStyle, { bgColor: item.bgColor }));
+        if (matched.length) return cellStyle.bgColor;
+        return COLOR_BG_CELL_HOVER;
+      },
+      inlineRowBgColor: ({ table, row, col }) => {
+        const cellStyle = table.getCellStyle(col, row);
+        const matched = CUSTOM_STYLE_LIST.filter((item) => isMatch(cellStyle, { bgColor: item.bgColor }));
+        if (matched.length) return cellStyle.bgColor;
+        return COLOR_BG_CELL_HOVER;
+      }
+    }
+  },
+  headerStyle: {
+    fontSize: HEADER_FONT_SIZE
+  },
+  bodyStyle: {
+    fontSize: DEFAULT_FONT_SIZE
+  },
+  frozenColumnLine: {
+    shadow: {
+      width: 4,
+      startColor: "rgba(00, 24, 47, 0.05)",
+      endColor: "rgba(00, 24, 47, 0.03)",
+      visible: "always"
+    }
+  }
+};
+
+const { createUseContext, Provider: VTableProvider } = createContextWithProvider(
+  ({
+    id,
+    columns,
+    initialValues,
+    onChange,
+    ref,
+    theme: theme$1,
+    disabled = false,
+    debug = false,
+    cellMenus,
+    headerMenus,
+    moreMenus,
+    commandManager,
+    uploadFileFn,
+    innerColumnControl = {
+      checkbox: true,
+      main: true,
+      plus: true
+    },
+    ...rest
+  }) => {
+    const containerRef = useRef(null);
+    const editorRef = useRef(null);
+    useImperativeHandle(ref, () => {
+      return {
+        getEditor: () => editorRef.current
+      };
+    });
+    return {
+      id,
+      editorRef,
+      theme: theme$1 ?? theme,
+      columns,
+      records: initialValues,
+      containerRef,
+      disabled,
+      cellMenus,
+      headerMenus,
+      moreMenus,
+      onChange,
+      commandManager,
+      uploadFileFn,
+      innerColumnControl,
+      debug,
+      ...rest
+    };
+  }
+);
+const useComponentVTable = createUseContext();
+
+const INNER_TABLE_COLUMN_KEY_PLUS = "INNER_TABLE_COLUMN_KEY_PLUS";
+const INNER_TABLE_COLUMN_KEY_CHECKBOX = "INNER_TABLE_COLUMN_KEY_CHECKBOX";
+const INNER_TABLE_COLUMN_KEY_LIST = [INNER_TABLE_COLUMN_KEY_PLUS, INNER_TABLE_COLUMN_KEY_CHECKBOX];
+const INNER_TABLE_RECORD_ID_KEY = "INNER_PRESET_RECORD_ID";
+
+const highlightMerge = (obj1, obj2) => {
+  return mergeWith({}, obj1, obj2, (objValue, srcValue) => {
+    if (Array.isArray(objValue)) {
+      return objValue.concat(srcValue);
+    }
+  });
+};
+const getColFromColIndex = (colIndex, innerColumnControl) => {
+  const hasCheckbox = innerColumnControl.checkbox;
+  return colIndex + (hasCheckbox ? 1 : 0);
+};
+const adaptedCellPosition = (col, row, innerColumnControl) => ({
+  col: getColFromColIndex(col, innerColumnControl),
+  row: getRowFromRowIndex(row)
+});
+const getRowFromRowIndex = (rowIndex) => rowIndex + 1;
+
+function isValid(value) {
+  return value !== null && value !== void 0;
+}
+function getIconSizeFromFont(fontSize) {
+  return fontSize + 2;
+}
+function getFunctionalProp(name, cellStyle, col, row, _table) {
+  const prop = cellStyle && isValid(cellStyle[name]) ? cellStyle[name] : void 0;
+  if (typeof prop === "function") {
+    const arg = {
+      col,
+      row,
+      table: _table,
+      value: _table.getCellValue(col, row),
+      dataValue: _table.getCellOriginValue(col, row),
+      cellHeaderPaths: _table.getCellHeaderPaths(col, row)
+    };
+    return prop(arg);
+  }
+  return void 0;
+}
+function getProp(name, cellStyle, col, row, _table) {
+  const prop = cellStyle && isValid(cellStyle[name]) ? cellStyle[name] : void 0;
+  if (typeof prop === "function") {
+    const arg = {
+      col,
+      row,
+      table: _table,
+      value: _table.getCellValue(col, row),
+      dataValue: _table.getCellOriginValue(col, row),
+      cellHeaderPaths: _table.getCellHeaderPaths(col, row)
+    };
+    return prop(arg);
+  }
+  return prop ?? DEFAULT_FONT_SIZE;
+}
+
+const resolvePaddingLR = (padding) => {
+  if (typeof padding === "number") {
+    return [padding, padding];
+  } else {
+    if (padding.length === 2) {
+      return [padding[1], padding[1]];
+    } else if (padding.length === 4) {
+      return [padding[1], padding[3]];
+    }
+  }
+  throw new Error("padding \u683C\u5F0F\u9519\u8BEF");
+};
+
+function getAttribute(graphics) {
+  if ("attribute" in graphics) {
+    return graphics.attribute;
+  } else {
+    return graphics.props.attribute;
+  }
+}
+const createGraphicsWithLoading = (graphics, loading) => {
+  const attribute = getAttribute(graphics);
+  if (loading) {
+    const group = createGroup({
+      width: attribute.width,
+      height: attribute.height,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      alignContent: "center"
+    });
+    const loadingImage = createImage({
+      width: 20,
+      height: 20,
+      image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTk4OCA1NDhjLTE5LjkgMC0zNi0xNi4xLTM2LTM2IDAtNTkuNC0xMS42LTExNy0zNC42LTE3MS4zYTQ0MC40NSA0NDAuNDUgMCAwMC05NC4zLTEzOS45IDQzNy43MSA0MzcuNzEgMCAwMC0xMzkuOS05NC4zQzYyOSA4My42IDU3MS40IDcyIDUxMiA3MmMtMTkuOSAwLTM2LTE2LjEtMzYtMzZzMTYuMS0zNiAzNi0zNmM2OS4xIDAgMTM2LjIgMTMuNSAxOTkuMyA0MC4zQzc3Mi4zIDY2IDgyNyAxMDMgODc0IDE1MGM0NyA0NyA4My45IDEwMS44IDEwOS43IDE2Mi43IDI2LjcgNjMuMSA0MC4yIDEzMC4yIDQwLjIgMTk5LjMuMSAxOS45LTE2IDM2LTM1LjkgMzZ6IiAvPjwvc3ZnPg==",
+      anchor: [attribute.width / 2, attribute.height / 2],
+      cornerRadius: 10
+    });
+    loadingImage.animate().to(
+      {
+        angle: Math.PI * 2
+      },
+      1e3,
+      "linear"
+    ).loop(Infinity);
+    group.add(loadingImage);
+    return group;
+  } else {
+    return graphics;
+  }
+};
+
+const createTextGraphics = (props) => {
+  const { table, row, col, rect } = props;
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const value = props.value?.value ?? "";
+  const loading = !!props.value?.loading;
+  const cellStyle = table._getCellStyle(col, row);
+  const functionalFontSize = getProp("fontSize", cellStyle, col, row, table);
+  const functionalColor = getProp("color", cellStyle, col, row, table);
+  const parsedColor = props.color ?? functionalColor;
+  const padding = getProp("padding", cellStyle, col, row, table);
+  const paddingLR = resolvePaddingLR(padding);
+  const group = createGroup({
+    width,
+    height,
+    display: "flex",
+    flexWrap: "nowrap",
+    justifyContent: "space-around",
+    alignContent: "center",
+    alignItems: "center"
+    // 垂直居中
+  });
+  const text = createText({
+    fontSize: functionalFontSize,
+    fontFamily: "sans-serif",
+    text: value,
+    fill: parsedColor,
+    cursor: "pointer",
+    maxLineWidth: width - paddingLR[0] - paddingLR[1],
+    boundsPadding: padding
+  });
+  group.add(text);
+  return createGraphicsWithLoading(group, loading);
+};
+
+const createJsonGraphics = (props) => {
+  const value = props.value?.value ?? "";
+  let parsedValue = "";
+  try {
+    parsedValue = JSON.stringify(JSON.parse(value));
+    return createTextGraphics({
+      ...props,
+      value: {
+        ...props.value,
+        value: parsedValue
+      }
+    });
+  } catch {
+    return createTextGraphics({
+      ...props,
+      color: "red",
+      value: {
+        ...props.value,
+        value: "JSON Error"
+      }
+    });
+  }
+};
+
+const VTableEditorType = {
+  "TEXT_AREA": "textAreaEditor",
+  "INPUT": "inputEditor",
+  "DATE": "dateInputEditor",
+  "MULTI_SELECT": "multiSelectEditor",
+  "SINGLE_SELECT": "singleSelectEditor",
+  "LINK": "linkEditor",
+  "NUMBER": "numberEditor",
+  "TEXT": "textEditor",
+  "JSON": "jsonEditor"
+};
+
+const toolTypeToEditorMap = /* @__PURE__ */ new Map([
+  [29, "singleSelectEditor"],
+  [30, "multiSelectEditor"],
+  [36, "dateInputEditor"],
+  [33, "linkEditor"],
+  [34, "jsonEditor"],
+  [31, "numberEditor"],
+  [37, "numberEditor"],
+  // 多个 key 映射到同一个 value
+  [28, "textEditor"],
+  [35, "textEditor"]
+]);
+const getEditorByToolType = (toolType) => {
+  return toolTypeToEditorMap.get(toolType) ?? void 0;
+};
+
+const baseCreator = (data, _innerColumnControl) => {
+  const { id, label, lock, width, type, options } = data;
+  const minWidth = 100;
+  const baseColumn = {
+    field: id,
+    title: label,
+    lock,
+    width: Math.max(minWidth, width ?? 0),
+    minWidth,
+    tool: type,
+    fmt: data.default?.format,
+    options,
+    request: data.request,
+    editor: getEditorByToolType(type),
+    // 默认表头渲染函数
+    headerCustomLayout: (args) => {
+      return {
+        rootContainer: createHeaderGraphics(type, args),
+        renderDefault: false
+      };
+    },
+    customLayout: (args) => {
+      return {
+        rootContainer: createTextGraphics(args),
+        renderDefault: false
+      };
+    }
+  };
+  return baseColumn;
+};
+const textColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    customLayout: (args) => {
+      return {
+        rootContainer: createTextGraphics(args),
+        renderDefault: false
+      };
+    }
+  };
+};
+const simpleSelectColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    editor: "singleSelectEditor",
+    customLayout: (args) => {
+      return {
+        rootContainer: createSingleSelectGraphic(args),
+        renderDefault: false
+      };
+    }
+  };
+};
+const multiSelectColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    editor: "multiSelectEditor",
+    customLayout: (args) => {
+      const { table, row, col, rect } = args;
+      const { height, width } = rect ?? table.getCellRect(col, row);
+      return {
+        rootContainer: createMultiSelectGraphic({ width, height, ...args }),
+        renderDefault: false
+      };
+    }
+  };
+};
+const numberColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    fmt: data.default?.format,
+    // editor: "numberEditor",
+    customLayout: (args) => {
+      return {
+        rootContainer: createNumberGraphics({
+          ...args,
+          textAlign: "right"
+        }),
+        renderDefault: false
+      };
+    }
+  };
+};
+const attachmentColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    customLayout: (args) => {
+      return {
+        rootContainer: createUploadDocumentGraphics(args),
+        renderDefault: false
+      };
+    }
+  };
+};
+const linkColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    customLayout: (args) => {
+      return {
+        rootContainer: createLinkGraphics(args),
+        renderDefault: false
+      };
+    }
+  };
+};
+const dateColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    fmt: data.default?.format,
+    customLayout: (args) => {
+      return {
+        rootContainer: createDateGraphics(args),
+        renderDefault: false
+      };
+    }
+  };
+};
+const timeLenColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    // NOTE: editor 为 number 输入整型
+    fmt: "integer",
+    customLayout: (args) => {
+      return {
+        rootContainer: createTimeLenGraphics(args),
+        renderDefault: false
+      };
+    }
+  };
+};
+const userColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    customLayout: (args) => {
+      return {
+        rootContainer: createPeopleGraphics(args),
+        renderDefault: false
+      };
+    }
+  };
+};
+const tagColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    customLayout: (args) => {
+      return {
+        rootContainer: createTagGraphic(args),
+        renderDefault: false
+      };
+    }
+  };
+};
+const jsonColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    customLayout: (args) => {
+      return {
+        rootContainer: createJsonGraphics(args),
+        renderDefault: false
+      };
+    }
+  };
+};
+const dropdownColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    dragHeader: false,
+    customLayout: (args) => {
+      return {
+        rootContainer: createMoreGraphics(args),
+        renderDefault: false
+      };
+    }
+  };
+};
+const checkboxColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    lock: true,
+    width: 40,
+    minWidth: 40,
+    headerType: "checkbox",
+    //指定表头单元格显示为复选框
+    cellType: "checkbox",
+    //指定body单元格显示为复选框
+    field: INNER_TABLE_COLUMN_KEY_CHECKBOX,
+    disable: false,
+    disableColumnResize: true,
+    disableSelect: true,
+    disableHeaderSelect: true,
+    dragHeader: false,
+    headerStyle: {
+      borderLineWidth: [1, 0, 1, 1],
+      // 上右下左的边框宽度
+      marked: false
+    },
+    style: {
+      borderLineWidth: [1, 0, 1, 1],
+      // 上右下左的边框宽度
+      marked: false
+    }
+  };
+};
+const plusColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    dragHeader: false,
+    field: INNER_TABLE_COLUMN_KEY_PLUS,
+    width: 50,
+    disable: true,
+    disableHover: true,
+    disableHeaderSelect: true,
+    disableColumnResize: true,
+    disableSelect: true,
+    headerCustomLayout: (args) => {
+      return {
+        rootContainer: createPlusHeaderGraphics(args),
+        renderDefault: false
+      };
+    },
+    style: {
+      borderLineWidth: ({ row, table }) => {
+        if (row === 1) return [1, 1, 0, 1];
+        if (row === table.rowCount - 1) return [0, 1, 1, 1];
+        return [0, 1, 0, 1];
+      }
+    }
+  };
+};
+const moreColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  return {
+    ...baseColumn,
+    field: "more",
+    title: "\u66F4\u591A",
+    dragHeader: false,
+    customLayout: (args) => {
+      return {
+        rootContainer: createMoreGraphics(args),
+        renderDefault: false
+      };
+    }
+  };
+};
+const mainColumnCreator = (data, innerColumnControl) => {
+  const baseColumn = baseCreator(data);
+  const mainKeyColumn = {
+    ...baseColumn,
+    tool: 28,
+    lock: true,
+    field: data.id,
+    dragHeader: false,
+    title: data.label,
+    width: 200,
+    headerStyle: {
+      borderLineWidth: [1, 1, 1, 0]
+      // 上右下左的边框宽度
+    },
+    style: {
+      borderLineWidth: [1, 1, 1, 0]
+      // 上右下左的边框宽度
+    },
+    headerCustomLayout: (args) => {
+      return {
+        rootContainer: createHeaderGraphics(28, args),
+        renderDefault: false
+      };
+    },
+    customLayout: (args) => {
+      return {
+        rootContainer: createMainColumnCellGraphics(args),
+        renderDefault: false
+      };
+    }
+  };
+  return mainKeyColumn;
+};
+const createColumns = (data, innerColumnControl) => {
+  const creator = creatorMap.get(data.type) ?? baseCreator;
+  return castArray(creator(data, innerColumnControl));
+};
+const creatorMap = /* @__PURE__ */ new Map([
+  [28, textColumnCreator],
+  [29, simpleSelectColumnCreator],
+  [30, multiSelectColumnCreator],
+  [31, numberColumnCreator],
+  [36, dateColumnCreator],
+  [33, linkColumnCreator],
+  [32, attachmentColumnCreator],
+  [37, timeLenColumnCreator],
+  [38, userColumnCreator],
+  [35, tagColumnCreator],
+  [34, jsonColumnCreator],
+  [39, dropdownColumnCreator],
+  /** 表格内置列 */
+  [-1, checkboxColumnCreator],
+  [-3, plusColumnCreator],
+  [-2, moreColumnCreator],
+  [-4, mainColumnCreator]
+]);
+
+const adaptColumnStructure = (originalColumns, innerColumnControl) => {
+  const hasMainColumn = innerColumnControl.main;
+  const columnFeedbacksErrors = [];
+  const adaptedColumns = originalColumns.map((column, colIndex) => {
+    if (column.feedbacks && column.feedbacks.length > 0) {
+      columnFeedbacksErrors.push({
+        type: "column",
+        col: getColFromColIndex(colIndex, innerColumnControl),
+        info: column.feedbacks
+      });
+    }
+    return createColumns(
+      {
+        ...column,
+        // TODO: any
+        type: colIndex === 0 && hasMainColumn && [28, 31].includes(column.type) ? -4 : column.type
+      },
+      innerColumnControl
+    );
+  }).flat();
+  if (innerColumnControl.checkbox) {
+    adaptedColumns.unshift(
+      checkboxColumnCreator(
+        {
+          type: -1,
+          id: INNER_TABLE_COLUMN_KEY_CHECKBOX,
+          label: ""
+        })
+    );
+  }
+  if (innerColumnControl.plus)
+    adaptedColumns.push(
+      plusColumnCreator(
+        {
+          type: -3,
+          id: INNER_TABLE_COLUMN_KEY_PLUS,
+          label: ""
+        })
+    );
+  return {
+    columns: adaptedColumns,
+    feedbacksHighlight: {
+      [CUSTOM_CELL_STYLE_FEEDBACK_ERROR]: [...columnFeedbacksErrors]
+    }
+  };
+};
+
+const adaptRecordStructure = (record) => {
+  const { id, cells } = record;
+  const cellValues = Object.entries(cells).map(([columnId, data]) => {
+    const { id: id2, value, loading, feedbacks } = data ?? {};
+    const realId = !id2 ? columnId : id2;
+    return [columnId, { id: realId, value, loading, feedbacks }];
+  });
+  return {
+    [INNER_TABLE_RECORD_ID_KEY]: id,
+    ...Object.fromEntries(cellValues)
+  };
+};
+const revertRecordStructure = (tableRecord) => {
+  const { [INNER_TABLE_RECORD_ID_KEY]: recordId, ...cellsMap } = tableRecord;
+  const cells = Object.fromEntries(
+    Object.entries(cellsMap).map(([columnId, cellData]) => {
+      const { id, value, loading, feedbacks } = cellData ?? {};
+      const realId = !id ? columnId : id;
+      return [
+        columnId,
+        {
+          id: realId,
+          value,
+          loading,
+          feedbacks
+        }
+      ];
+    })
+  );
+  return {
+    id: recordId,
+    cells
+  };
+};
+const adaptRecordsStructure = (records, adapterColumns, innerColumnControl) => {
+  const fields = adapterColumns.map((column) => column.field);
+  const rowFeedbacksErrors = [];
+  const cellFeedbacksErrors = [];
+  const rows = records.map((record, rowIndex) => {
+    const { id, feedbacks, cells } = record;
+    const cellValues = Object.entries(cells).map(([columnId, { id: id2, value, loading, feedbacks: feedbacks2 }]) => {
+      if (feedbacks2 && feedbacks2.length) {
+        cellFeedbacksErrors.push({
+          type: "cell",
+          col: fields.indexOf(columnId),
+          row: getRowFromRowIndex(rowIndex),
+          info: feedbacks2 ?? []
+        });
+      }
+      const realId = !id2 ? columnId : id2;
+      return [columnId, { id: realId, value, loading, feedbacks: feedbacks2 }];
+    });
+    if (feedbacks && feedbacks.length) {
+      rowFeedbacksErrors.push({
+        type: "row",
+        col: getColFromColIndex(0, innerColumnControl),
+        row: getRowFromRowIndex(rowIndex),
+        info: feedbacks ?? []
+      });
+    }
+    return {
+      [INNER_TABLE_RECORD_ID_KEY]: id,
+      ...Object.fromEntries(cellValues)
+    };
+  });
+  return {
+    records: rows,
+    feedbacksHighlight: {
+      [CUSTOM_CELL_STYLE_FEEDBACK_ERROR]: [...cellFeedbacksErrors, ...rowFeedbacksErrors]
+    }
+  };
+};
+
+const { setDateEditorData, getDateEditorData, useDateEditorData } = createAtomStore(
+  "dateEditorData",
+  atom()
+);
+const { setDateEditorValue, getDateEditorValue, useDateEditorValue } = createAtomStore(
+  "dateEditorValue",
+  atom()
+);
+const initDateEditorTool = (value) => {
+  const { initialValue } = value;
+  setDateEditorData(value);
+  setDateEditorValue(initialValue);
+};
+const clearDateEditorTool = () => {
+  setDateEditorData(void 0);
+  setDateEditorValue(void 0);
+};
+
+const { getActiveEditorTable, setActiveEditorTable, useActiveEditorTable } = createAtomStore(
+  "activeEditorTable",
+  atom(
+    (get) => {
+      const map = get(editorTableStoreAtom);
+      const activeId = get(activeTableIdAtom);
+      if (!activeId) throw new Error("activeTableId is empty");
+      return map.get(activeId);
+    },
+    () => {
+      throw new Error("activeEditorTable is empty");
+    }
+  )
+);
+const { setActiveTableId, getActiveTableId, useActiveTableId, activeTableIdAtom } = createAtomStore(
+  "activeTableId",
+  atom()
+);
+const { setEditorTableStore, getEditorTableStore, useEditorTableStore, editorTableStoreAtom } = createAtomStore(
+  "editorTableStore",
+  atom(/* @__PURE__ */ new Map())
+);
+
+const dateProcess = (data, dateFormat) => {
+  const originalFullDayjs = dayjs(data.initialValue);
+  const isSpecialFormat = dateFormat === "MM-DD" || dateFormat.includes("MM") && dateFormat.includes("DD") && !dateFormat.includes("YYYY") || dateFormat === "MM/DD/YYYY" || dateFormat === "DD/MM/YYYY";
+  if (isSpecialFormat) {
+    return originalFullDayjs.isValid() ? originalFullDayjs : dayjs();
+  } else {
+    return dayjs(data.initialValue, dateFormat).isValid() ? dayjs(data.initialValue, dateFormat) : dayjs();
+  }
+};
+
+const DateSelect = () => {
+  const data = useDateEditorData();
+  if (!data) return null;
+  const tableEditor = getActiveEditorTable();
+  let dateFormat = "";
+  const column = tableEditor?.getColumnDefine(data?.cell?.col);
+  if (column.fmt) {
+    dateFormat = column.fmt || "YYYY/MM/DD HH:mm";
+  }
+  setDateEditorValue(data.initialValue);
+  const validDayjs = dateProcess(data, dateFormat);
+  const TZ_SUFFIX = " (GMT+8)";
+  const hasTimezone = dateFormat.endsWith(TZ_SUFFIX);
+  const pureFormat = hasTimezone ? dateFormat.replace(TZ_SUFFIX, "") : dateFormat;
+  const hasTime = /(HH|hh):mm(:ss)?/.test(pureFormat);
+  const formatDateDisplay = (date) => {
+    if (!date) return "";
+    const baseText = date.format(pureFormat);
+    return hasTimezone ? `${baseText} (GMT+8)` : baseText;
+  };
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      trigger: "click",
+      className: "popoverDate",
+      arrow: false,
+      open: true,
+      align: {
+        points: ["tl", "bl"],
+        offset: [0, 10]
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      DatePicker,
+      {
+        defaultValue: validDayjs,
+        format: formatDateDisplay,
+        defaultOpen: true,
+        showTime: hasTime ? { format: pureFormat } : false,
+        allowClear: false,
+        onChange: (value) => {
+          let targetDayjs;
+          if (Array.isArray(value)) {
+            targetDayjs = value[0] || null;
+          } else {
+            targetDayjs = value;
+          }
+          if (!targetDayjs) return;
+          const finalFormat = hasTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
+          const finalValue = targetDayjs.format(finalFormat);
+          if (!hasTime) {
+            if (data.initialValue?.value) {
+              const originalDayjs = dayjs(data.initialValue.value);
+              const hour = originalDayjs.hour();
+              const minute = originalDayjs.minute();
+              const second = originalDayjs.second();
+              const newDayjs = targetDayjs.hour(hour).minute(minute).second(second);
+              setDateEditorValue(newDayjs.format("YYYY-MM-DD HH:mm:ss"));
+            } else {
+              setDateEditorValue(targetDayjs.hour(0).minute(0).second(0).format("YYYY-MM-DD HH:mm:ss"));
+            }
+          } else {
+            setDateEditorValue(finalValue);
+          }
+          data.endEdit();
+        },
+        style: {
+          position: "absolute",
+          left: data.cell.position.x,
+          top: data.cell.position.y,
+          width: data.cell.width,
+          height: data.cell.height
+        }
+      }
+    )
+  );
+};
+
+const { setJsonEditorData, getJsonEditorData, useJsonEditorData } = createAtomStore(
+  "jsonEditorData",
+  atom()
+);
+const { setJsonEditorValue, getJsonEditorValue, useJsonEditorValue } = createAtomStore(
+  "jsonEditorValue",
+  atom()
+);
+const initJsonEditorTool = (value) => {
+  const { initialValue } = value;
+  setJsonEditorData(value);
+  setJsonEditorValue(initialValue);
+};
+const clearJsonEditorTool = () => {
+  setJsonEditorData(void 0);
+  setJsonEditorValue(void 0);
+};
+
+const TableJsonEditor = () => {
+  const jsonEditorData = useJsonEditorData();
+  const jsonEditorValue = useJsonEditorValue();
+  const clcHeight = useMemo(() => {
+    const lineCount = (jsonEditorValue ?? "").split("\n").length;
+    return lineCount * 20;
+  }, [jsonEditorValue]);
+  if (!jsonEditorData) return null;
+  const editor = getActiveEditorTable();
+  if (!editor) throw new Error("TableJsonEditor: editor is null");
+  const { cell, table } = jsonEditorData;
+  const { position, width } = cell;
+  const cellStyle = table._getCellStyle(cell.col, cell.row);
+  const fontSize = getProp("fontSize", cellStyle, cell.col, cell.row, table);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "json-editor-modal-container",
+      style: {
+        fontSize,
+        width,
+        height: clcHeight,
+        minHeight: 100,
+        maxHeight: 300,
+        position: "absolute",
+        top: position.y,
+        left: position.x
+      }
+    },
+    /* @__PURE__ */ React.createElement(JsonEditor, { value: jsonEditorData.initialValue, onChange: (value) => setJsonEditorValue(value), dark: false })
+  );
+};
+
+const { setLinkEditorData, getLinkEditorData, useLinkEditorData } = createAtomStore(
+  "linkEditorData",
+  atom()
+);
+const { setLinkEditorValue, getLinkEditorValue, useLinkEditorValue } = createAtomStore(
+  "linkEditorValue",
+  atom()
+);
+const initLinkEditorTool = (value) => {
+  const { initialValue } = value;
+  setLinkEditorData(value);
+  setLinkEditorValue(initialValue);
+};
+const clearLinkEditorTool = () => {
+  setLinkEditorData(void 0);
+  setLinkEditorValue(void 0);
+};
+
+const LinkEditor = ({}) => {
+  const [popContentVisible, setPopContentVisible] = useState(false);
+  const data = useLinkEditorData();
+  const linkValue = useLinkEditorValue();
+  const cancel = useCallback(() => {
+    setLinkEditorValue({ ...data?.initialValue ?? {} });
+    data?.endEdit();
+  }, [data]);
+  const confirm = useCallback(() => data?.endEdit(), [data]);
+  if (!data) return null;
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      open: popContentVisible,
+      content: /* @__PURE__ */ React.createElement(Form, { className: "link-editor-form", layout: "vertical", style: { width: 300 } }, /* @__PURE__ */ React.createElement(Form.Item, { label: "\u6587\u672C", className: "link-editor-form-item" }, /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          defaultValue: linkValue?.title ?? "",
+          onChange: (e) => setLinkEditorValue((v) => ({ ...v ?? {}, title: e.target.value }))
+        }
+      )), /* @__PURE__ */ React.createElement(Form.Item, { label: "\u8D85\u94FE\u63A5", className: "link-editor-form-item" }, /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          defaultValue: linkValue?.url ?? "",
+          onChange: (e) => setLinkEditorValue((v) => ({ ...v ?? {}, url: e.target.value }))
+        }
+      )), /* @__PURE__ */ React.createElement(Flex, { justify: "flex-end" }, /* @__PURE__ */ React.createElement(Space, null, /* @__PURE__ */ React.createElement(Button, { onClick: cancel }, "\u53D6\u6D88"), /* @__PURE__ */ React.createElement(Button, { type: "primary", onClick: confirm }, "\u786E\u5B9A")))),
+      rootClassName: "link-editor-popover-root",
+      className: "link-editor-popover",
+      arrow: false,
+      align: {
+        points: ["tl", "bl"],
+        // tl(top-left): 将【pop弹窗】左上角 与 Input bl(bottom-left) 左下角对齐
+        offset: [0, 10]
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Flex,
+      {
+        style: {
+          border: `2px solid ${COLOR_BORDER_SELECTION}`,
+          backgroundColor: COLOR_BG_CELL,
+          borderRadius: 0,
+          position: "absolute",
+          left: data.cell.position.x - 2,
+          top: data.cell.position.y - 2,
+          width: data.cell.width + 4,
+          height: data.cell.height + 4
+        },
+        align: "center"
+      },
+      /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          className: "link-editor-input",
+          style: {
+            color: COLOR_LINK,
+            border: "unset",
+            borderRadius: 0,
+            height: data.cell.height - 2,
+            boxSizing: "border-box"
+          },
+          defaultValue: linkValue?.title ?? "",
+          onChange: (e) => setLinkEditorValue((v) => ({ ...v ?? {}, title: e.target.value })),
+          onFocus: () => setPopContentVisible(false)
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          type: "text",
+          icon: /* @__PURE__ */ React.createElement(LinkOutlined, null),
+          style: {
+            border: "unset",
+            borderRadius: 0,
+            height: data.cell.height - 2,
+            boxSizing: "border-box"
+          },
+          onClick: () => setPopContentVisible(!popContentVisible)
+        }
+      )
+    )
+  );
+};
+
+const { setNumEditorValue, getNumEditorValue, useNumEditorValue } = createAtomStore(
+  "numEditorValue",
+  atom()
+);
+const { setNumEditorData, getNumEditorData, useNumEditorData } = createAtomStore(
+  "numEditorData",
+  atom()
+);
+const initNumEditorTool = (data) => {
+  setNumEditorData(data);
+  setNumEditorValue(data.initialValue);
+};
+const clearNumEditorTool = () => {
+  setNumEditorData(void 0);
+  setNumEditorValue(void 0);
+};
+
+const NumEditor = () => {
+  const numEditorData = useNumEditorData();
+  if (!numEditorData) return null;
+  const { cell, table } = numEditorData;
+  const { position, width, height } = cell;
+  const cellStyle = table._getCellStyle(cell.col, cell.row);
+  const fontSize = getProp("fontSize", cellStyle, cell.col, cell.row, table);
+  const bgColor = getProp("bgColor", cellStyle, cell.col, cell.row, table);
+  return /* @__PURE__ */ React.createElement(
+    InputNumber,
+    {
+      defaultValue: numEditorData.initialValue,
+      onChange: (value) => setNumEditorValue(value),
+      controls: false,
+      className: "num-editor-input",
+      style: {
+        position: "absolute",
+        left: position.x - 2,
+        top: position.y - 2,
+        width: width + 4,
+        minHeight: height + 4,
+        background: bgColor,
+        border: "2px solid #0404ff",
+        borderRadius: 0,
+        fontSize,
+        scrollbarWidth: "none"
+      }
+    }
+  );
+};
+
+const { setSelectEditorData, getSelectEditorData, useSelectEditorData } = createAtomStore(
+  "selectEditorData",
+  atom(null)
+);
+const { setSelectEditorValue, getSelectEditorValue, useSelectEditorValue } = createAtomStore(
+  "selectEditorValue",
+  atom([])
+);
+const initSelectEditorTool = (value) => {
+  const { initialValue } = value;
+  setSelectEditorData(value);
+  setSelectEditorValue(initialValue);
+};
+const clearSelectEditorTool = () => {
+  setSelectEditorData(null);
+  setSelectEditorValue([]);
+};
+
+const TableChangeEvent = {
+  "CELLS_UPDATE": "cells::update",
+  "CELL_CLICK": "cell::click",
+  "CELL_ATTACHMENT_PREVIEW": "cell::attachment::preview",
+  "SELECT_OPTIONS_UPDATE": "select::options::update",
+  "RECORD_OPEN_DETAIL_DRAWER": "record::open::detail::drawer",
+  "RECORD_CHECKBOX_STATE_CHANGE": "record::checkbox::state::change",
+  "COLUMN_WIDTH_UPDATE": "column::width::update",
+  "COLUMN_DRAG_MOVE_END": "column::drag::move::end",
+  "COLUMN_ADD_FROM_INNER_PLUS": "column::add::from::inner::plus"
+};
+
+const EDIT_TABLE_CELL_DATA_COMMAND_ID = Symbol("EDIT_TABLE_CELL_DATA_COMMAND_ID");
+const EDIT_TABLE_CELL_DATA_COMMAND_LABEL = "\u7F16\u8F91\u8868\u683C\u5355\u5143\u683C\u6570\u636E\u901A\u7528\u547D\u4EE4";
+class EditTableCellDataCommand extends Command {
+  constructor(editor, col, row, value, oldValue) {
+    super();
+    this.editor = editor;
+    this.col = col;
+    this.row = row;
+    this.value = value;
+    this.oldValue = oldValue;
+    this.id = EDIT_TABLE_CELL_DATA_COMMAND_ID;
+    this.label = EDIT_TABLE_CELL_DATA_COMMAND_LABEL;
+  }
+  get readonly() {
+    const columnDefine = this.editor.getColumnDefine(this.col);
+    return this.editor.lock || !!columnDefine?.lock;
+  }
+  execute(_props) {
+    this.editor.updateCellData(this.col, this.row, this.value);
+    const { columnId, recordId } = this.editor.getInteractiveCell(this.col, this.row);
+    this.editor.dispatch("cells::update", {
+      editor: this.editor,
+      data: [
+        {
+          recordId,
+          columnId,
+          previous: this.oldValue,
+          current: this.value
+        }
+      ]
+    });
+  }
+  undo(_props) {
+    this.editor.updateCellData(this.col, this.row, this.oldValue);
+    const { columnId, recordId } = this.editor.getInteractiveCell(this.col, this.row);
+    this.editor.dispatch("cells::update", {
+      editor: this.editor,
+      data: [
+        {
+          recordId,
+          columnId,
+          previous: this.value,
+          current: this.oldValue
+        }
+      ]
+    });
+  }
+}
+const EDIT_TABLE_CELL_DATA_FUNCTIONAL_COMMAND_ID = Symbol("EDIT_TABLE_CELL_DATA_FUNCTIONAL_COMMAND_ID");
+const EDIT_TABLE_CELL_DATA_FUNCTIONAL_COMMAND_LABEL = "\u7F16\u8F91\u8868\u683C\u5355\u5143\u683C\u6570\u636E\u901A\u7528\u51FD\u6570\u5F0F\u547D\u4EE4";
+class EditTableCellDataFunctionalCommand extends Command {
+  constructor(table, fn) {
+    super();
+    this.table = table;
+    this.fn = fn;
+    this.id = EDIT_TABLE_CELL_DATA_FUNCTIONAL_COMMAND_ID;
+    this.label = EDIT_TABLE_CELL_DATA_FUNCTIONAL_COMMAND_LABEL;
+  }
+  get readonly() {
+    return this.table.lock;
+  }
+  execute(_props) {
+    const { restore } = this.fn();
+    this._restore = restore;
+  }
+  undo(_props) {
+    if (!this._restore) {
+      throw new Error(`[EditTableCellCommand id: ${this.id.toString()} label: ${this.label}] \u672A\u6307\u5B9A\u6062\u590D\u51FD\u6570`);
+    }
+    this._restore();
+    this._restore = void 0;
+  }
+}
+
+const updateSelectEditorCell = (col, row, value, oldValue) => {
+  const commandManager = getCommandManager();
+  const tableEditor = getActiveEditorTable();
+  if (!commandManager) return;
+  if (!tableEditor) return;
+  startTransaction((command2) => command2 instanceof EditTableCellDataFunctionalCommand);
+  const run = () => {
+    const previous = tableEditor.getCellOriginValue(col, row);
+    const current = { ...previous, value };
+    tableEditor.updateCellData(col, row, current);
+    const position = tableEditor.getInteractiveCell(col, row);
+    tableEditor.dispatch("cells::update", {
+      editor: tableEditor,
+      data: [
+        {
+          previous,
+          current,
+          ...position
+        }
+      ]
+    });
+    const curData = getSelectEditorData();
+    if (curData && curData.cell.col === col && curData.cell.row === row) {
+      setSelectEditorValue(value);
+    }
+    return {
+      restore: () => {
+        const curData2 = getSelectEditorData();
+        tableEditor.updateCellData(col, row, previous);
+        tableEditor.dispatch("cells::update", {
+          editor: tableEditor,
+          data: [
+            {
+              previous: current,
+              current: previous,
+              ...position
+            }
+          ]
+        });
+        if (!curData2) return;
+        if (curData2.cell.col !== col || curData2.cell.row !== row) return;
+        setSelectEditorValue(oldValue);
+      }
+    };
+  };
+  const command = new EditTableCellDataFunctionalCommand(tableEditor, run);
+  commandManager.execute(command);
+  stopTransaction();
+};
+
+const SelectEditor = ({
+  listHeight = 300,
+  itemHeight = 32,
+  emptyText = "\u6682\u65E0\u6570\u636E",
+  multiple = true
+}) => {
+  const data = useSelectEditorData();
+  const table = useActiveEditorTable();
+  if (!data) throw new Error("SelectEditorData is null in SelectEditor");
+  if (!table) throw new Error("Table is null in SelectEditor");
+  const editValue = useSelectEditorValue();
+  const updateOption = (option) => {
+    setSelectEditorData((prev) => {
+      if (!prev) {
+        return prev;
+      }
+      const newOptions = prev.options.map((opt) => {
+        if (opt.value === option.value) {
+          return { ...opt, label: option.label, color: option.color || opt.color };
+        }
+        return opt;
+      });
+      const col = data.cell.col;
+      table.updateColumn(col, { options: newOptions });
+      table.dispatch("select::options::update", {
+        editor: table,
+        columnId: String(table.getColumnDefine(data.cell.col)?.field || ""),
+        options: newOptions
+      });
+      return { ...prev, options: newOptions };
+    });
+    setSelectEditorValue((prev) => {
+      if (!prev) {
+        return prev;
+      }
+      return prev.map((item) => item.value === option.value ? option : item);
+    });
+  };
+  const createOption = async (option) => {
+    const column = table.getColumnDefine(data.cell.col);
+    if (!column) throw new Error("SelectEditor createOption column is null");
+    if (column.request) option = await column.request(option).catch(() => option);
+    setSelectEditorData((prev) => {
+      if (!prev) return prev;
+      const col = data.cell.col;
+      table.updateColumn(col, { options: [...prev.options, option] });
+      table.dispatch("select::options::update", {
+        editor: table,
+        columnId: String(table.getColumnDefine(data.cell.col)?.field || ""),
+        options: [...prev.options, option]
+      });
+      return { ...prev, options: [...prev.options, option] };
+    });
+    return option;
+  };
+  const selectOption = (option) => {
+    const newEditValue = editValue || [];
+    if (multiple) {
+      const newSelected = newEditValue.map((item) => item.value).includes(option.value) ? newEditValue : [...newEditValue, option];
+      updateSelectEditorCell(data.cell.col, data.cell.row, newSelected, newEditValue);
+    } else {
+      updateSelectEditorCell(data.cell.col, data.cell.row, [option], newEditValue);
+    }
+  };
+  const deselectOption = (option) => {
+    const newEditValue = editValue || [];
+    const filterValue = newEditValue.filter((item) => item.value !== option.value);
+    updateSelectEditorCell(data.cell.col, data.cell.row, filterValue, newEditValue);
+  };
+  const handleChange = (value) => {
+    setSelectEditorValue(value);
+  };
+  return /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      listHeight,
+      itemHeight,
+      emptyText,
+      multiple,
+      options: data.options,
+      value: editValue || [],
+      onChange: handleChange,
+      onOptionChange: updateOption,
+      onOptionCreate: createOption,
+      onSelect: selectOption,
+      onDeselect: deselectOption,
+      tagAreaStyle: {
+        position: "absolute",
+        left: data.cell.position.x - 2,
+        top: data.cell.position.y - 2,
+        width: data.cell.width + 4,
+        minHeight: data.cell.height + 4,
+        border: `2px solid ${COLOR_BORDER_SELECTION}`,
+        backgroundColor: COLOR_BG_CELL
+      },
+      width: data.cell.width + 4,
+      tagAreaHeight: data.cell.height,
+      showDownIcon: true
+    }
+  );
+};
+
+const TableSelectEditor = () => {
+  const data = useSelectEditorData();
+  if (!data) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(SelectEditor, { multiple: data.isMultiple });
+};
+
+const { setTextEditorValue, getTextEditorValue, useTextEditorValue } = createAtomStore(
+  "textEditorValue",
+  atom()
+);
+const { setTextEditorData, getTextEditorData, useTextEditorData } = createAtomStore(
+  "textEditorData",
+  atom()
+);
+const initTextEditorTool = (data) => {
+  setTextEditorData(data);
+  setTextEditorValue(data.initialValue);
+};
+const clearTextEditorTool = () => {
+  setTextEditorData(void 0);
+  setTextEditorValue(void 0);
+};
+
+const TextEditor = () => {
+  const textEditorData = useTextEditorData();
+  if (!textEditorData) return null;
+  const { cell, table } = textEditorData;
+  const { position, width, height } = cell;
+  const cellStyle = table._getCellStyle(cell.col, cell.row);
+  const fontSize = getProp("fontSize", cellStyle, cell.col, cell.row, table);
+  const bgColor = getProp("bgColor", cellStyle, cell.col, cell.row, table);
+  return /* @__PURE__ */ React.createElement(
+    Input.TextArea,
+    {
+      defaultValue: textEditorData.initialValue,
+      onChange: (e) => setTextEditorValue(e.target.value),
+      autoSize: { minRows: 1 },
+      style: {
+        position: "absolute",
+        left: position.x - 2,
+        top: position.y - 2,
+        width: width + 4,
+        height: height + 4,
+        padding: 5,
+        background: bgColor,
+        fontSize,
+        border: "2px solid #0404ff",
+        borderRadius: 0,
+        scrollbarWidth: "none"
+      }
+    }
+  );
+};
+
+const { setUserShowId, getUserShowId, useUserShowId } = createAtomStore("userShowId", atom(null));
+const { setUserShowData, getUserShowData, useUserShowData } = createAtomStore(
+  "userShowData",
+  atom(null)
+);
+const initUserShowTool = (data) => {
+  setUserShowData(data);
+  setUserShowId(data.id);
+};
+const clearUserShowTool = () => {
+  setUserShowData(null);
+  setUserShowId(null);
+};
+
+const UserShow = () => {
+  const data = useUserShowData();
+  const valueId = useUserShowId();
+  const col = data?.cell?.col;
+  const row = data?.cell?.row;
+  const table = data?.table;
+  let cellStyle, fontSize;
+  if (table && typeof col === "number" && typeof row === "number") {
+    cellStyle = table._getCellStyle(col, row);
+    fontSize = getProp("fontSize", cellStyle, col, row, table);
+  } else {
+    cellStyle = void 0;
+    fontSize = 14;
+  }
+  const [popoverKey, setPopoverKey] = useState(0);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (data) {
+      setPopoverKey((prev) => prev + 1);
+      setOpen(true);
+    }
+  }, [data, valueId, col]);
+  if (!data || valueId === "-2") return null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: data.cell.position.x,
+        top: data.cell.position.y - 8,
+        zIndex: 9999,
+        pointerEvents: "auto",
+        transform: "translateX(-50%) translateY(-100%)"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Popover,
+      {
+        key: popoverKey,
+        content: /* @__PURE__ */ React.createElement(
+          AvatarPopoverContent,
+          {
+            id: valueId,
+            column: getActiveEditorTable()?.getColumnDefine(col),
+            fontSize
+          }
+        ),
+        open,
+        onOpenChange: setOpen,
+        placement: "top",
+        autoAdjustOverflow: false,
+        mouseEnterDelay: 0.3,
+        mouseLeaveDelay: 0.3,
+        arrow: { pointAtCenter: true },
+        getPopupContainer: () => document.body
+      }
+    )
+  );
+};
+
+const { setMenu, getMenu, useMenu } = createAtomStore("menu", atom(null));
+
+const CellContextMenu = ({}) => {
+  const menu = useMenu();
+  const { cellMenus } = useComponentVTable();
+  const tableEditor = useActiveEditorTable();
+  if (!tableEditor) return null;
+  if (!menu || menu.type !== "cell" || !cellMenus?.length) return null;
+  return /* @__PURE__ */ React.createElement(
+    CellContextMenuInner,
+    {
+      menu,
+      cellMenus,
+      tableEditor,
+      offsetParent: tableEditor.container
+    }
+  );
+};
+const CellContextMenuInner = ({ menu, cellMenus, tableEditor, offsetParent = null }) => {
+  const menuItems = useMemo(() => {
+    if (!menu || menu.type !== "cell") return;
+    return cellMenus?.map((item) => {
+      const { onCellClick, ...rest } = item;
+      return {
+        ...rest,
+        onClick: (info) => {
+          onCellClick?.({
+            menuInfo: info,
+            tableEditor,
+            cell: {
+              col: menu.cell.col,
+              row: menu.cell.row,
+              recordId: menu.cell.recordId,
+              columnId: menu.cell.columnId,
+              rect: menu.cell.rect
+            }
+          });
+          setMenu(null);
+        }
+      };
+    });
+  }, [cellMenus, menu, tableEditor]);
+  return /* @__PURE__ */ React.createElement(
+    TableMenuModal,
+    {
+      isOpen: menu?.open,
+      offsetParent,
+      position: menu.position,
+      menuItems: menuItems ?? [],
+      onPositionChange: (position) => setMenu(
+        (prev) => prev ? { ...prev, position: typeof position === "function" ? position(prev.position) : position } : null
+      )
+    }
+  );
+};
+
+const HeaderContextMenu = ({}) => {
+  const { headerMenus } = useComponentVTable();
+  const menu = useMenu();
+  const tableEditor = useActiveEditorTable();
+  if (!tableEditor) return null;
+  if (!menu || menu.type !== "header" || !headerMenus?.length) return null;
+  return /* @__PURE__ */ React.createElement(
+    HeaderContextMenuInner,
+    {
+      menu,
+      headerMenus,
+      tableEditor,
+      offsetParent: tableEditor.container
+    }
+  );
+};
+const HeaderContextMenuInner = ({
+  menu,
+  headerMenus,
+  tableEditor,
+  offsetParent = null
+}) => {
+  const menuItems = useMemo(() => {
+    if (!menu || menu.type !== "header") return;
+    return headerMenus?.map((item) => {
+      const { onCellClick, ...rest } = item;
+      return {
+        ...rest,
+        onClick: (info) => {
+          onCellClick?.({
+            menuInfo: info,
+            tableEditor,
+            cell: {
+              col: menu.cell.col,
+              row: menu.cell.row,
+              recordId: menu.cell.recordId,
+              columnId: menu.cell.columnId,
+              rect: menu.cell.rect
+            }
+          });
+          setMenu(null);
+        }
+      };
+    });
+  }, [headerMenus, menu, tableEditor]);
+  return /* @__PURE__ */ React.createElement(
+    TableMenuModal,
+    {
+      isOpen: menu?.open,
+      width: 210,
+      offsetParent,
+      position: menu.position,
+      menuItems: menuItems ?? [],
+      onPositionChange: (position) => setMenu(
+        (prev) => prev ? { ...prev, position: typeof position === "function" ? position(prev.position) : position } : null
+      )
+    }
+  );
+};
+
+const MoreContextMenu = () => {
+  const menu = useMenu();
+  const tableEditor = useActiveEditorTable();
+  const { moreMenus } = useComponentVTable();
+  if (!tableEditor) return null;
+  if (!menu || menu.type !== "more") return null;
+  return /* @__PURE__ */ React.createElement(MoreContextMenuInner, { menu, moreMenus, tableEditor });
+};
+const MoreContextMenuInner = ({ menu, moreMenus, tableEditor }) => {
+  const menuItems = useMemo(() => {
+    if (!menu || menu.type !== "more") return;
+    return moreMenus?.map((item) => {
+      const { onCellClick, ...rest } = item;
+      return {
+        ...rest,
+        onClick: (info) => {
+          onCellClick?.({
+            menuInfo: info,
+            tableEditor,
+            cell: {
+              col: menu.cell.col,
+              row: menu.cell.row,
+              recordId: menu.cell.recordId,
+              columnId: menu.cell.columnId,
+              rect: menu.cell.rect
+            }
+          });
+        }
+      };
+    });
+  }, [moreMenus, menu, tableEditor]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onMouseMove: () => setMenu({ ...menu }),
+      onMouseLeave: () => setMenu(null),
+      onMouseEnter: () => setMenu({ ...menu })
+    },
+    /* @__PURE__ */ React.createElement(
+      Dropdown,
+      {
+        menu: {
+          items: menuItems ?? []
+        },
+        align: {
+          offset: [0, -4]
+        },
+        placement: "bottom",
+        arrow: false
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            left: menu.position.x,
+            top: menu.position.y,
+            position: "absolute",
+            width: 16,
+            height: 20,
+            cursor: "pointer"
+          }
+        }
+      )
+    )
+  );
+};
+
+const Delete = () => {
+  useHotkeys(
+    ["backspace", "delete"],
+    () => {
+      const editor = getActiveEditorTable();
+      if (!editor) return;
+      const run = () => {
+        const selectedCellGroup = editor.getSelectedCell() ?? [];
+        const selectedCells = selectedCellGroup.flat().map((item) => ({
+          col: item.col,
+          row: item.row
+        })).filter((item) => item.row !== 0);
+        const payload = selectedCells.map((item) => {
+          return {
+            ...editor.getInteractiveCell(item.col, item.row),
+            previous: editor.getCellOriginValue(item.col, item.row)
+          };
+        });
+        const { recordsForRestore } = editor.removeSelectedCell();
+        const selectedCellNewValues = selectedCells.map((item) => editor.getCellOriginValue(item.col, item.row));
+        const data = payload.map((item, index) => {
+          return {
+            ...item,
+            current: selectedCellNewValues[index]
+          };
+        });
+        editor.dispatch("cells::update", {
+          editor,
+          data
+        });
+        return {
+          restore() {
+            const payload2 = selectedCells.map((item) => {
+              return {
+                ...editor.getInteractiveCell(item.col, item.row),
+                previous: editor.getCellOriginValue(item.col, item.row)
+              };
+            });
+            editor.updateRecordsData(recordsForRestore);
+            const selectedCellNewValues2 = selectedCells.map((item) => editor.getCellOriginValue(item.col, item.row));
+            const data2 = payload2.map((item, index) => {
+              return {
+                ...item,
+                current: selectedCellNewValues2[index]
+              };
+            });
+            editor.dispatch("cells::update", {
+              editor,
+              data: data2
+            });
+          }
+        };
+      };
+      const command = new EditTableCellDataFunctionalCommand(editor, run);
+      editor.commandManager.execute(command);
+    },
+    [],
+    {
+      enabled: true,
+      enableOnContentEditable: false
+    }
+  );
+  return null;
+};
+
+const History = () => {
+  const tableEditor = useActiveEditorTable();
+  const commandManager = tableEditor?.commandManager;
+  useHotkeys(
+    "mod+z",
+    () => {
+      if (!commandManager) return;
+      commandManager.undo();
+    },
+    [commandManager],
+    {
+      enabled: !!commandManager,
+      enableOnContentEditable: false,
+      enableOnFormTags: true
+    }
+  );
+  useHotkeys(
+    "mod+shift+z",
+    () => {
+      if (!commandManager) return;
+      commandManager.redo();
+    },
+    [commandManager],
+    {
+      enabled: !!commandManager,
+      enableOnContentEditable: false,
+      enableOnFormTags: true
+    }
+  );
+  return null;
+};
+
+const Hotkeys = () => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Delete, null), /* @__PURE__ */ React.createElement(History, null));
+};
+
+class TableEditorEvent extends DestroyClass {
+  constructor(editor, instance, container) {
+    super();
+    this.editor = editor;
+    this.instance = instance;
+    this.container = container;
+    this.cancels.push(this.initEvent());
+  }
+  initEvent() {
+    const handleContextMenuCell = (e) => {
+      const event = e.event;
+      const { recordId, columnId } = this.editor.getInteractiveCell(e.col, e.row);
+      const columnDefine = this.instance.getBodyColumnDefine(e.col, e.row);
+      if (columnDefine.disableSelect) {
+        if (this.editor.debug) console.info("\u5F53\u524D\u5217\u7981\u7528\u9009\u4E2D\uFF0C\u65E0\u6CD5\u89E6\u53D1\u4E0A\u4E0B\u6587\u83DC\u5355", e, columnDefine);
+        return;
+      }
+      const containerRect = this.instance.getContainer().getBoundingClientRect();
+      const rect = this.instance.getCellRelativeRect(e.col, e.row);
+      rect.left += containerRect.left;
+      rect.top += containerRect.top;
+      rect.right += containerRect.left;
+      rect.bottom += containerRect.top;
+      const isHeader = e.row === 0;
+      const position = !isHeader ? { x: event.clientX, y: event.clientY } : { x: rect.left, y: rect.bottom + 1 };
+      setMenu({
+        open: true,
+        type: isHeader ? "header" : "cell",
+        position,
+        cell: { col: e.col, row: e.row, recordId, columnId, rect }
+      });
+    };
+    const hideMenu = (e) => {
+      if (e.target.closest(".menu-container")) return;
+      else setMenu(null);
+    };
+    const handleContextMenu = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const dbClickHandler = ({ col, row }) => {
+      const columnDefine = this.instance.getBodyColumnDefine(col, row);
+      const cellValue = this.instance.getCellValue(col, row);
+      if (this.editor.debug) {
+        console.group("\u53CC\u51FB\u5355\u5143\u683C\u4E8B\u4EF6");
+        console.log("\u5F53\u524D\u5355\u5143\u683C\u9501\u5B9A&loading\u72B6\u6001:", {
+          editor: this.editor.lock,
+          column: columnDefine.lock,
+          loading: cellValue?.loading
+        });
+        console.log("\u5F53\u524D\u5355\u5143\u683C\u5DF2\u9501\u5B9A\u6216\u6B63\u5728\u52A0\u8F7D\u4E2D\uFF0C\u65E0\u6CD5\u7F16\u8F91");
+        console.groupEnd();
+      }
+      if (this.editor.lock || columnDefine?.lock || cellValue?.loading) return;
+      this.instance.startEditCell(col, row);
+    };
+    const cellClickHandler = ({ col, row }) => {
+      const columnDefine = this.instance.getBodyColumnDefine(col, row);
+      const record = this.instance.getRecordByCell(col, row);
+      const recordData = record ? revertRecordStructure(record) : void 0;
+      const cellValue = this.instance.getCellValue(col, row);
+      if (this.editor.debug) {
+        console.group("\u5355\u51FB\u5355\u5143\u683C\u4E8B\u4EF6");
+        console.log("\u5F53\u524D\u5217\u914D\u7F6E:", columnDefine);
+        console.log("\u5355\u5143\u683C\u6570\u636E:", cellValue);
+        console.log("\u5F53\u524D\u884C\u6570\u636E:", recordData);
+        console.log("\u5F53\u524D\u5355\u5143\u683C\u9501\u5B9A\u72B6\u6001:", {
+          editor: this.editor.lock,
+          column: columnDefine.lock
+        });
+        console.log("\u5F53\u524D\u8868\u683C\u6570\u636E\u7BA1\u7406\u5668:", this.editor.recordsManager);
+        console.groupEnd();
+      }
+      this.editor.dispatch("cell::click", {
+        editor: this.editor,
+        columnDefine,
+        record,
+        cellValue
+      });
+    };
+    const changeHeaderPositionHandler = () => {
+      this.editor.dispatch("column::drag::move::end", {
+        editor: this.editor,
+        columnIds: this.editor.columnIds.filter((item) => !INNER_TABLE_COLUMN_KEY_LIST.includes(item))
+      });
+    };
+    const resizeColumnEndHandler = ({ col, colWidths }) => {
+      const define = this.editor.getColumnDefine(col);
+      if (INNER_TABLE_COLUMN_KEY_LIST.includes(define.field)) return;
+      this.editor.dispatch("column::width::update", {
+        editor: this.editor,
+        columnId: define.field,
+        width: colWidths[col]
+      });
+    };
+    const checkboxStateChangeHandler = (event) => {
+      const { field } = event;
+      if (field != INNER_TABLE_COLUMN_KEY_CHECKBOX) return;
+      const recordIds = this.editor.interactive.selectedRecords;
+      this.editor.dispatch("record::checkbox::state::change", {
+        editor: this.editor,
+        selectedRecordIds: recordIds
+      });
+    };
+    this.instance.on("contextmenu_cell", handleContextMenuCell);
+    this.instance.on("dblclick_cell", dbClickHandler);
+    this.instance.on("click_cell", cellClickHandler);
+    this.instance.on("change_header_position", changeHeaderPositionHandler);
+    this.instance.on("resize_column_end", resizeColumnEndHandler);
+    this.instance.on("checkbox_state_change", checkboxStateChangeHandler);
+    const parent = this.container.parentElement;
+    parent.addEventListener("contextmenu", handleContextMenu);
+    window.addEventListener("click", hideMenu);
+    return () => {
+      this.instance.off("contextmenu_cell", handleContextMenuCell);
+      this.instance.off("dblclick_cell", dbClickHandler);
+      this.instance.off("click_cell", cellClickHandler);
+      this.instance.off("change_header_position", changeHeaderPositionHandler);
+      this.instance.off("resize_column_end", resizeColumnEndHandler);
+      this.instance.off("checkbox_state_change", checkboxStateChangeHandler);
+      parent.removeEventListener("contextmenu", handleContextMenu);
+      window.removeEventListener("click", hideMenu);
+      this.instance.eventManager.release();
+    };
+  }
+  destroy() {
+    super.destroy();
+  }
+}
+
+class BaseTableInteractive {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  get selectedRecords() {
+    const records = this.editor.getSelectedRecord();
+    return records.map((record) => record[INNER_TABLE_RECORD_ID_KEY]);
+  }
+  get selectedCells() {
+    const selectedCells = this.editor.getSelectedCell() ?? [];
+    const cellGroups = selectedCells.filter((group) => group[0].row !== 0);
+    const cells = cellGroups.flat();
+    return cells.map((item) => {
+      const { col, row } = item;
+      const { columnId, recordId } = this.editor.getInteractiveCell(col, row);
+      return {
+        cell: { columnId, recordId },
+        data: item.value
+      };
+    });
+  }
+  getRecordsManagerStore() {
+    return this.editor.recordsManager.store;
+  }
+  filters(recordIds) {
+    this.editor.recordsManager.filters = recordIds;
+  }
+  selectCell(cell) {
+    const { col, row } = this.editor.getInteractiveCellPosition(cell);
+    this.editor.selectCell(col, row);
+  }
+  selectColumnByIndex(columnIndex) {
+    const col = getColFromColIndex(columnIndex, this.editor.innerColumnControl);
+    this.editor.instance.selectCol(col);
+  }
+  selectRowByIndex(recordIndex) {
+    const row = getRowFromRowIndex(recordIndex);
+    this.editor.instance.selectRow(row);
+  }
+  selectCellByIndex(cell) {
+    const [recordIndex, colIndex] = cell;
+    const col = getColFromColIndex(colIndex, this.editor.innerColumnControl);
+    const row = getRowFromRowIndex(recordIndex);
+    this.editor.selectCell(col, row);
+  }
+  clearSelect() {
+    this.editor.instance.clearSelected();
+  }
+  setRecordsSelectState(records, state = true) {
+    const columnIndex = 0;
+    const columnDefine = this.editor.getColumnDefine(0);
+    if (columnDefine.field !== INNER_TABLE_COLUMN_KEY_CHECKBOX) throw new Error("\u5F53\u524D\u8868\u683C\u7B2C\u4E00\u5217\u4E0D\u662F\u590D\u9009\u6846\u5217");
+    if (records === "all") {
+      const rowCount = this.editor.rowCount;
+      for (let row = 0; row < rowCount; row++) {
+        this.editor.setCheckboxState(columnIndex, row, state);
+      }
+    } else {
+      const cellPositions = records.map(
+        (item) => this.editor.getInteractiveCellPosition({ recordId: item, columnId: INNER_TABLE_COLUMN_KEY_CHECKBOX })
+      );
+      cellPositions.forEach((item) => this.editor.setCheckboxState(columnIndex, item.row, state));
+    }
+  }
+  getRecord(recordId) {
+    const { row } = this.editor.getInteractiveCellPosition({ recordId, columnId: INNER_TABLE_COLUMN_KEY_CHECKBOX });
+    const data = this.editor.getRecordByCell(0, row);
+    const record = data ? revertRecordStructure(data) : void 0;
+    return record;
+  }
+  getRecords(recordIds) {
+    const records = recordIds.map((item) => this.getRecord(item));
+    return records;
+  }
+  updateRecords(records) {
+    this.editor.recordsManager.updateRecords(records);
+  }
+  addRecords(_records) {
+    this.editor.recordsManager.addRecords(_records);
+  }
+  removeRecords(_recordIds) {
+    this.editor.recordsManager.removeRecords(_recordIds);
+  }
+  focus(cell) {
+    const { col, row } = this.editor.getInteractiveCellPosition(cell);
+    this.editor.focusCell(col, row);
+  }
+  focusByIndex(cell) {
+    const [recordIndex, colIndex] = cell;
+    const col = getColFromColIndex(colIndex, this.editor.innerColumnControl);
+    const row = getRowFromRowIndex(recordIndex);
+    this.editor.focusCell(col, row);
+  }
+  highlight(cells, _key = CUSTOM_CELL_STYLE_HIGHLIGHT_FOCUS) {
+    const positions = cells.map((cell) => this.editor.getInteractiveCellPosition(cell));
+    this.editor.highlightCells(_key, positions);
+  }
+  highlightByIndex(cells, _key = CUSTOM_CELL_STYLE_HIGHLIGHT_FOCUS) {
+    const positions = cells.map(([recordIndex, colIndex]) => ({
+      row: getRowFromRowIndex(recordIndex),
+      col: getColFromColIndex(colIndex, this.editor.innerColumnControl)
+    }));
+    this.editor.highlightCells(_key, positions);
+  }
+  clearHighlight(key = CUSTOM_CELL_STYLE_HIGHLIGHT_FOCUS) {
+    this.editor.clearHighlight(key);
+  }
+  // 冻结列的数量，此处count是用户可感知列的数量
+  setFreezeCount(count) {
+    const { checkbox } = this.editor.innerColumnControl;
+    const realCount = count + (checkbox ? 1 : 0);
+    this.editor.setFreezeCount(realCount);
+  }
+}
+
+class RecordsManager extends DestroyClass {
+  constructor(editor) {
+    super();
+    this.editor = editor;
+    this.recordsMap = atom(/* @__PURE__ */ new Map());
+    this._filters = atom(void 0);
+    /**
+     * 当前表格records数量
+     *
+     * 如果filters不存在，直接返回 recordsMap 数量，
+     *
+     * 如果filters存在，则返回 filters 中存在的 records 数量
+     */
+    this.size = atom((get) => {
+      const records = get(this.recordsMap);
+      const filters = get(this._filters);
+      let count = 0;
+      if (isNil(filters)) count = records.size;
+      else {
+        count = filters.map((recordId) => records.get(recordId)).filter(Boolean).length;
+      }
+      return count;
+    });
+  }
+  get filters() {
+    return window.store.get(this._filters);
+  }
+  set filters(value) {
+    window.store.set(this._filters, value);
+    this.renderRecords();
+  }
+  initRecords(records) {
+    const recordsMap = window.store.get(this.recordsMap);
+    records.forEach((item) => recordsMap.set(item.INNER_PRESET_RECORD_ID, item));
+    window.store.set(this.recordsMap, new Map(recordsMap));
+  }
+  renderRecords() {
+    const recordsMap = window.store.get(this.recordsMap);
+    const records = this.filters ? this.filters.map((filter) => recordsMap.get(filter)) : [...recordsMap.values()];
+    const data = records.filter(Boolean);
+    this.editor.setRecords(data);
+  }
+  updateRecords(records) {
+    const recordsMap = window.store.get(this.recordsMap);
+    records.forEach((item) => {
+      const adaptedRecord = adaptRecordStructure(item);
+      recordsMap.set(adaptedRecord[INNER_TABLE_RECORD_ID_KEY], adaptedRecord);
+    });
+    const ids = records.map((item) => item.id);
+    const values = [...recordsMap.values()];
+    const data = values.map((item, index) => {
+      return ids.includes(item.INNER_PRESET_RECORD_ID) ? [item, index] : void 0;
+    }).filter(Boolean);
+    this.editor.instance.updateRecords(
+      data.map(([record]) => record),
+      data.map(([, rowIndex]) => rowIndex)
+    );
+    window.store.set(this.recordsMap, new Map(recordsMap));
+  }
+  addRecords(records) {
+    const recordsMap = window.store.get(this.recordsMap);
+    records.forEach((item) => {
+      const adaptedRecord = adaptRecordStructure(item);
+      if (recordsMap.has(adaptedRecord[INNER_TABLE_RECORD_ID_KEY])) {
+        throw new Error("record id already exists " + adaptedRecord[INNER_TABLE_RECORD_ID_KEY]);
+      }
+      recordsMap.set(adaptedRecord[INNER_TABLE_RECORD_ID_KEY], adaptedRecord);
+    });
+    const recordsAdapted = records.map((item) => recordsMap.get(item.id)).filter(Boolean);
+    this.editor.addRecords(recordsAdapted);
+    window.store.set(this.recordsMap, new Map(recordsMap));
+  }
+  removeRecords(recordIds) {
+    const recordsMap = window.store.get(this.recordsMap);
+    recordIds.forEach((id) => recordsMap.delete(id));
+    const indexes = recordIds.map((id) => this.editor.getInteractiveRecordIndex(id)).filter((i) => i !== -1);
+    this.editor.deleteRecords(indexes);
+    window.store.set(this.recordsMap, new Map(recordsMap));
+  }
+  get store() {
+    return window.store.get(this.recordsMap);
+  }
+  get(recordId) {
+    const recordsMap = window.store.get(this.recordsMap);
+    return recordsMap.get(recordId);
+  }
+  set(recordId, record) {
+    const recordsMap = window.store.get(this.recordsMap);
+    recordsMap.set(recordId, record);
+    window.store.set(this.recordsMap, new Map(recordsMap));
+  }
+}
+
+const createHeaderGraphics = (type, props) => {
+  const { table, row, col, rect, value } = props;
+  const headerStyle = table._getCellStyle(col, row);
+  const columnDefine = table.getBodyColumnDefine(col, row);
+  const lock = !!columnDefine.lock;
+  const functionalFontSize = getProp("fontSize", headerStyle, col, row, table);
+  const functionalColor = getProp("color", headerStyle, col, row, table);
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const headerIconSize = getIconSizeFromFont(functionalFontSize);
+  const g = createGroup({
+    width,
+    height,
+    display: "flex",
+    flexWrap: "nowrap",
+    justifyContent: "space-between",
+    alignContent: "center",
+    alignItems: "center"
+    // 垂直居中
+  });
+  const lg = createGroup({
+    width: width - 30,
+    height,
+    display: "flex",
+    flexWrap: "nowrap",
+    justifyContent: "flex-start",
+    alignContent: "center",
+    alignItems: "center"
+  });
+  const rg = createGroup({
+    display: "flex",
+    width: 30,
+    height,
+    alignContent: "center",
+    alignItems: "center"
+  });
+  const arrowIcon = createIconGraphics("arrow_down", {
+    size: headerIconSize,
+    color: functionalColor,
+    cursor: "pointer",
+    hoverBg: true
+  });
+  rg.add(arrowIcon);
+  const toolContainer = createGroup({
+    display: "flex",
+    width: 30,
+    height,
+    alignContent: "center",
+    alignItems: "center"
+  });
+  const toolIcon = createIconGraphics(lock ? "lock" : TOOL_ICON[type], {
+    size: headerIconSize,
+    color: functionalColor
+  });
+  toolContainer.add(toolIcon);
+  const titleContainer = createGroup({
+    display: "flex",
+    width: width - 60,
+    height,
+    alignContent: "center",
+    alignItems: "center"
+  });
+  const title = createText({
+    text: value,
+    dy: -functionalFontSize / 2,
+    fontSize: functionalFontSize,
+    fill: functionalColor,
+    lineHeight: height,
+    maxLineWidth: width - 30,
+    textAlign: "left",
+    textBaseline: "middle"
+  });
+  titleContainer.add(title);
+  lg.add(toolContainer);
+  lg.add(titleContainer);
+  g.add(lg);
+  g.add(rg);
+  arrowIcon.addEventListener("click", () => {
+  });
+  return g;
+};
+
+const isColumnEditable = (table, col) => {
+  const column = table.getBodyColumnDefine(col, 0);
+  const lock = column.lock;
+  return !lock;
+};
+const createDefaultColumnConfig = () => {
+  return {
+    field: getUUID(),
+    title: "\u6587\u672C",
+    tool: 28,
+    // TODO: 改成自定义的文本输入组件
+    editor: "textEditor",
+    headerCustomLayout: (args) => {
+      return {
+        rootContainer: createHeaderGraphics(28, args),
+        renderDefault: false
+      };
+    }
+  };
+};
+
+class TableEditor extends DestroyClass {
+  constructor(id, container, onChange, config, commandManager, uploadFile, innerColumnControl) {
+    super();
+    this.id = id;
+    this.container = container;
+    this.commandManager = commandManager;
+    this.uploadFile = uploadFile;
+    this.innerColumnControl = innerColumnControl;
+    this._lock = atom(false);
+    this.customCellStyleArrangement = /* @__PURE__ */ new Map();
+    this.recordsManager = new RecordsManager(this);
+    /**
+     * 当前是否处于debug状态，一般开发的时候为true，会打印一些需要调试的日志
+     */
+    this.debug = false;
+    /**
+     * 供外部调用的接口
+     */
+    this.interactive = new BaseTableInteractive(this);
+    this.dispatch = onChange;
+    const editorMap = getEditorTableStore();
+    const editor = editorMap.get(this.id);
+    if (editor) throw new Error("TableEditor \u5DF2\u5B58\u5728");
+    this.instance = new ListTable(container, config);
+    editorMap.set(id, this);
+    setEditorTableStore(new Map([...editorMap]));
+    this.event = new TableEditorEvent(this, this.instance, this.container);
+    this.recordsManager.initRecords(this.instance.records);
+    this.load();
+  }
+  get lock() {
+    return window.store.get(this._lock);
+  }
+  set lock(value) {
+    window.store.set(this._lock, value);
+  }
+  get colCount() {
+    return this.instance.colCount;
+  }
+  get rowCount() {
+    return this.instance.rowCount;
+  }
+  /**
+   * 用于限定列的操作范围
+   * 前两列 0 1 是关键主列，不进行任何操作，并且顺序永远在最前面
+   * 最后两列 colCount - 1：Plus列, colCount - 2：more列 同样是固定列
+   */
+  get colActionLimit() {
+    return {
+      min: 2,
+      max: this.instance.colCount - 2
+    };
+  }
+  get columnIds() {
+    return this.columns.map((item) => item.field);
+  }
+  get columns() {
+    return this.instance.columns;
+  }
+  updateCellData(col, row, value) {
+    const { field } = this.getColumnDefine(col);
+    const record = this.instance.getRecordByCell(col, row);
+    const recordId = record[INNER_TABLE_RECORD_ID_KEY];
+    const recordData = this.recordsManager.get(recordId);
+    if (!recordData) throw new Error(`[updateCellData] recordId ${recordId} \u4E0D\u5B58\u5728`);
+    recordData[field] = value;
+    this.updateCell(col, row, value);
+  }
+  getRecordByCell(col, row) {
+    return this.instance.getRecordByCell(col, row);
+  }
+  getInteractiveCell(col, row) {
+    const record = this.instance.getRecordByCell(col, row) ?? {};
+    const columnDefine = this.instance.getBodyColumnDefine(col, row);
+    const recordId = record[INNER_TABLE_RECORD_ID_KEY];
+    const columnId = columnDefine.field;
+    return { columnId, recordId };
+  }
+  getInteractiveRecordIndex(recordId) {
+    return this.instance.records.findIndex((record) => record[INNER_TABLE_RECORD_ID_KEY] === recordId);
+  }
+  getInteractiveCellPosition(cell) {
+    const { recordId, columnId } = cell;
+    const fields = this.instance.columns.map((item) => item.field);
+    const rowIndex = this.instance.records.findIndex((record) => record[INNER_TABLE_RECORD_ID_KEY] === recordId);
+    const col = fields.findIndex((field) => field === columnId);
+    return { col, row: getRowFromRowIndex(rowIndex) };
+  }
+  updateColumns(columns) {
+    this.instance.updateColumns(columns);
+  }
+  getSelectedRecord() {
+    const selected = this.instance.getCheckboxState(INNER_TABLE_COLUMN_KEY_CHECKBOX);
+    return this.instance.records.filter((_, index) => selected[index]);
+  }
+  setCheckboxState(col, row, state) {
+    this.instance.setCellCheckboxState(col, row, state);
+  }
+  getColumnDefine(col) {
+    return this.instance.getBodyColumnDefine(col, 0);
+  }
+  getSelectedCell() {
+    return this.instance.getSelectedCellInfos();
+  }
+  focusCell(col, row) {
+    this.instance.scrollToCell({ col, row });
+  }
+  highlightCells(customCellStyleKey, cells) {
+    this.clearHighlight(customCellStyleKey);
+    cells.forEach((cell) => this.instance.arrangeCustomCellStyle(cell, customCellStyleKey));
+    this.customCellStyleArrangement.set(customCellStyleKey, cells);
+  }
+  clearHighlight(customCellStyleKey) {
+    if (!customCellStyleKey) {
+      this.instance.arrangeCustomCellStyle(
+        {
+          range: {
+            start: { col: 0, row: 0 },
+            end: { col: this.instance.colCount - 1, row: this.instance.rowCount - 1 }
+          }
+        },
+        "",
+        true
+      );
+      this.customCellStyleArrangement.clear();
+    } else {
+      const cells = this.customCellStyleArrangement.get(customCellStyleKey) || [];
+      cells.forEach((cell) => this.instance.arrangeCustomCellStyle(cell, ""));
+      this.customCellStyleArrangement.delete(customCellStyleKey);
+    }
+  }
+  updateColumn(col, options) {
+    const newColumns = [...this.instance.columns];
+    newColumns[col] = {
+      ...newColumns[col],
+      ...options
+    };
+    this.instance.updateColumns(newColumns);
+  }
+  setRecords(_records) {
+    this.instance.setRecords(_records, { sortState: null });
+  }
+  addRecords(_records) {
+    this.instance.addRecords(_records);
+  }
+  selectCell(col, row) {
+    this.instance.selectCell(col, row);
+  }
+  /**
+   * 删除选中单元格
+   * 1. 过滤表头行
+   * 2. 只修改没有被锁定的列内容
+   */
+  removeSelectedCell() {
+    const selectedCells = this.getSelectedCell() ?? [];
+    const cellGroups = selectedCells.filter((group) => group[0].row !== 0);
+    const rows = cellGroups.map((cells) => this.instance.getRecordShowIndexByCell(cells[0].col, cells[0].row));
+    const row1 = cellGroups[0];
+    const cols = row1.map((cell) => cell.col).filter((col) => isColumnEditable(this.instance, col));
+    const fields = cols.map((col) => this.instance.columns[col].field).filter(Boolean);
+    const recordsForRestore = rows.map((row) => [
+      structuredClone(this.instance.records[row]),
+      row
+    ]);
+    const records = rows.map((row) => {
+      const record = structuredClone(this.instance.records[row]);
+      fields.forEach((field) => record[field].value = void 0);
+      return [record, row];
+    });
+    this.instance.updateRecords(
+      records.map(([record]) => record),
+      records.map(([, row]) => row)
+    );
+    return {
+      records,
+      recordsForRestore
+    };
+  }
+  /**
+   * 添加数据 支持多条数据
+   * @param records 多条数据
+   * @param recordIndex 向数据源中要插入的位置，从0开始。不设置recordIndex的话 默认追加到最后。
+   * 如果设置了排序规则recordIndex无效，会自动适应排序逻辑确定插入顺序。
+   * recordIndex 可以通过接口getRecordShowIndexByCell获取
+   */
+  createRows(count, recordBodyIndex) {
+    const index = recordBodyIndex ?? this.instance.recordsCount;
+    const columns = this.instance.columns.map((item) => [item.field, item.defaultValue ?? void 0]);
+    const defaultRecord = Object.fromEntries(columns);
+    const newRecords = Array.from({ length: count }).map(() => clone(defaultRecord));
+    this.instance.addRecords([...newRecords], index);
+    const indexes = [];
+    for (let i = 0; i < count; i++) {
+      indexes.push(index + i);
+    }
+    return {
+      newRecords,
+      newRecordIndexes: indexes
+    };
+  }
+  deleteRecords(recordIndexes) {
+    this.instance.deleteRecords(recordIndexes);
+  }
+  /**
+   * 删除行
+   */
+  removeRow(count, recordBodyIndex) {
+    if (this.lock) throw new Error("\u9501\u5B9A\u8868\u683C\uFF0C\u4E0D\u5141\u8BB8\u5220\u9664\u884C");
+    const index = recordBodyIndex;
+    const indexes = [];
+    for (let i = 0; i < count; i++) {
+      indexes.push(index + i);
+    }
+    const records = structuredClone(indexes.map((index2) => this.instance.records[index2]));
+    this.instance.deleteRecords(clone(indexes));
+    return {
+      oldRecords: records,
+      oldRecordIndexes: indexes
+    };
+  }
+  /**
+   * 新增默认列
+   * @param count 新增列数
+   * @param insertIndex 新增列索引，默认在最后一列前新增
+   */
+  createColumn(count, insertIndex) {
+    if (this.lock) throw new Error("\u9501\u5B9A\u8868\u683C\uFF0C\u4E0D\u5141\u8BB8\u65B0\u589E\u5217");
+    const columns = [...this.instance.columns];
+    const newColumns = [...this.instance.columns];
+    const index = clamp(insertIndex, this.colActionLimit.min, this.colActionLimit.max);
+    const createdColumns = Array.from({ length: count }).map(() => createDefaultColumnConfig());
+    newColumns.splice(index, 0, ...createdColumns);
+    this.instance.updateColumns(newColumns);
+    return {
+      oldColumns: columns,
+      newColumns
+    };
+  }
+  /**
+   * 删除列
+   */
+  removeColumn(count, startIndex) {
+    if (this.lock) throw new Error("\u9501\u5B9A\u8868\u683C\uFF0C\u4E0D\u5141\u8BB8\u5220\u9664\u5217");
+    const oldColumns = [...this.instance.columns];
+    const newColumns = [...this.instance.columns];
+    const min = this.colActionLimit.min;
+    const max = this.colActionLimit.max;
+    const plannedIndexes = Array.from({ length: count }, (_, i) => startIndex + i);
+    const inRangeIndexes = plannedIndexes.filter((i) => i >= min && i <= max);
+    if (inRangeIndexes.length === 0) {
+      console.warn(
+        `[removeColumn] \u6CA1\u6709\u4EFB\u4F55\u5217\u843D\u5728\u53EF\u64CD\u4F5C\u8303\u56F4\u5185\u3002startIndex=${startIndex}, count=${count}, \u8303\u56F4=[${min}, ${max}]`
+      );
+      return;
+    }
+    const removableIndexes = inRangeIndexes.filter((i) => isColumnEditable(this.instance, i));
+    const notEditableIndexes = inRangeIndexes.filter((i) => !isColumnEditable(this.instance, i));
+    if (notEditableIndexes.length > 0) {
+      console.warn(`[removeColumn] \u4EE5\u4E0B\u5217\u88AB\u9501\u5B9A\uFF0C\u4E0D\u53C2\u4E0E\u5220\u9664: ${notEditableIndexes.join(", ")}`);
+    }
+    if (removableIndexes.length === 0) {
+      console.warn(`[removeColumn] \u53EF\u64CD\u4F5C\u8303\u56F4\u5185\u7684\u5217\u5747\u4E0D\u53EF\u5220\u9664\u3002startIndex=${startIndex}, count=${count}`);
+      return;
+    }
+    removableIndexes.sort((a, b) => b - a);
+    removableIndexes.forEach((index) => {
+      newColumns.splice(index, 1);
+    });
+    this.instance.updateColumns(newColumns);
+    return {
+      oldColumns,
+      newColumns
+    };
+  }
+  /**
+   * 复制列
+   * @param sourceIndex 要复制的列索引
+   * @param insertIndex 插入位置，默认在源列之后
+   */
+  copyColumn(sourceIndex, insertIndex = sourceIndex + 1) {
+    if (this.lock) throw new Error("\u9501\u5B9A\u8868\u683C\uFF0C\u4E0D\u5141\u8BB8\u590D\u5236\u5217");
+    const oldColumns = [...this.instance.columns];
+    const newColumns = [...this.instance.columns];
+    const sourceColumn = oldColumns[sourceIndex];
+    const newColumn = clone(sourceColumn);
+    newColumn.field = getUUID();
+    newColumn.title = `${newColumn.title} \u590D\u5236`;
+    newColumns.splice(insertIndex, 0, newColumn);
+    this.instance.updateColumns(newColumns);
+    return {
+      oldColumns,
+      newColumns
+    };
+  }
+  /**
+   * 冻结列
+   * @param count 要冻结的列数
+   * 注意：count >= 2，否则会将关键主列于checkbox拆分
+   */
+  setFreezeCount(count) {
+    if (this.lock) throw new Error("\u9501\u5B9A\u8868\u683C\uFF0C\u4E0D\u5141\u8BB8\u51BB\u7ED3\u5217");
+    const oldFrozenColCount = this.instance.frozenColCount;
+    const newFrozenColCount = count;
+    this.instance.setFrozenColCount(count);
+    return {
+      oldValue: oldFrozenColCount,
+      newValue: newFrozenColCount
+    };
+  }
+  getCellOriginValue(col, row) {
+    return this.instance.getCellOriginValue(col, row);
+  }
+  updateCell(col, row, value) {
+    if (this.lock) throw new Error("\u9501\u5B9A\u8868\u683C\uFF0C\u4E0D\u5141\u8BB8\u4FEE\u6539\u5355\u5143\u683C\u6570\u636E");
+    if (!isColumnEditable(this.instance, col)) throw new Error(`\u9501\u5B9A\u5217\uFF0C\u4E0D\u5141\u8BB8\u4FEE\u6539 column: ${col}`);
+    const rowIndex = this.instance.getRecordShowIndexByCell(col, row);
+    const oldValue = this.instance.getCellValue(col, row);
+    const field = this.instance.columns[col].field;
+    const record = this.instance.records[rowIndex];
+    this.instance.updateRecords([{ ...record, [field]: value }], [rowIndex]);
+    return {
+      record,
+      rowIndex,
+      oldValue,
+      newValue: value
+    };
+  }
+  updateRecordsData(records) {
+    records.forEach(([item]) => {
+      const recordId = item[INNER_TABLE_RECORD_ID_KEY];
+      this.recordsManager.set(recordId, item);
+    });
+    this.instance.updateRecords(
+      records.map(([record]) => record),
+      records.map(([, rowIndex]) => rowIndex)
+    );
+  }
+  getCellStyle(col, row) {
+    return this.instance.getCellStyle(col, row);
+  }
+  load() {
+    this.cancels.push(
+      ...[
+        () => this.event.destroy(),
+        () => this.instance.release(),
+        () => {
+          const editorMap = getEditorTableStore();
+          editorMap.delete(this.id);
+          setEditorTableStore(new Map([...editorMap]));
+        }
+      ]
+    );
+  }
+  unload() {
+    this.cancels.forEach((cancel) => cancel());
+  }
+  destroy() {
+    super.destroy();
+    this.unload();
+  }
+}
+const createBaseTableEditor = (config) => {
+  const {
+    id,
+    onChange,
+    columns,
+    records,
+    theme,
+    commandManager,
+    container,
+    uploadFileFn,
+    innerColumnControl,
+    ...rest
+  } = config;
+  const defaultChangeHandler = (e, payload) => {
+    console.info("\u9ED8\u8BA4\u53D8\u66F4\u5904\u7406\u51FD\u6570", e, payload);
+  };
+  const dispatch = onChange ?? defaultChangeHandler;
+  const frozenColCount = [innerColumnControl.checkbox, innerColumnControl.main].filter(Boolean).length;
+  const options = {
+    columns,
+    records,
+    theme,
+    hover: {
+      highlightMode: "cross"
+    },
+    customCellStyle: [CUSTOM_CELL_STYLE, CUSTOM_CELL_FOCUS_STYLE, CUSTOM_CELL_FEEDBACK_ERROR_STYLE],
+    dragOrder: {
+      dragHeaderMode: "column",
+      // 仅启用列表头拖拽换位
+      validateDragOrderOnEnd: (source, target) => {
+        const tableEditor = getActiveEditorTable();
+        if (!tableEditor) throw new Error("\u672A\u6FC0\u6D3B\u7684\u8868\u683C\u7F16\u8F91\u5668");
+        if (source.col <= 1) return false;
+        if (target.col <= 1) return false;
+        if (target.col >= tableEditor.colCount - 2) return false;
+        return true;
+      }
+    },
+    // 如果有checkbox，前两列默认固定 一列checkbox 一列题目名称
+    // 如果没有checkbox，第一列默认固定
+    frozenColCount,
+    defaultColWidth: 150,
+    defaultRowHeight: TABLE_DEFAULT_ROW_HEIGHT,
+    enableLineBreak: true,
+    heightMode: "standard",
+    editCellTrigger: "api",
+    showHeader: true,
+    ...rest
+  };
+  const editor = new TableEditor(id, container, dispatch, options, commandManager, uploadFileFn, innerColumnControl);
+  return editor;
+};
+
+const TableView = ({}) => {
+  const {
+    id,
+    editorRef,
+    containerRef,
+    records,
+    columns,
+    theme,
+    commandManager,
+    onChange,
+    uploadFileFn,
+    innerColumnControl,
+    disabled,
+    maxHeight,
+    debug,
+    ...rest
+  } = useComponentVTable();
+  const [recordsState] = useState(records);
+  const innerColumnControlState = useMemo(() => {
+    return {
+      main: innerColumnControl.main,
+      plus: innerColumnControl.plus,
+      checkbox: innerColumnControl.checkbox
+    };
+  }, [innerColumnControl.checkbox, innerColumnControl.main, innerColumnControl.plus]);
+  useEffect(() => {
+    if (!editorRef.current) return;
+    editorRef.current.lock = disabled;
+    editorRef.current.debug = debug;
+  }, [disabled, editorRef, debug]);
+  const adaptedData = useMemo(() => {
+    const adaptedColumns = adaptColumnStructure(columns, innerColumnControlState);
+    const adaptedRecords = adaptRecordsStructure(recordsState, adaptedColumns.columns, innerColumnControlState);
+    return {
+      columns: adaptedColumns.columns,
+      records: adaptedRecords.records,
+      highlight: highlightMerge(adaptedRecords.feedbacksHighlight, adaptedColumns.feedbacksHighlight)
+    };
+  }, [columns, innerColumnControlState, recordsState]);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    if (editorRef.current) {
+      editorRef.current.updateColumns(adaptedData.columns);
+      editorRef.current.innerColumnControl = innerColumnControl;
+      return;
+    }
+    editorRef.current = createBaseTableEditor({
+      id,
+      onChange,
+      container: containerRef.current,
+      columns: adaptedData.columns,
+      records: adaptedData.records,
+      theme,
+      commandManager,
+      uploadFileFn,
+      innerColumnControl,
+      ...rest
+    });
+    editorRef.current.lock = disabled;
+    editorRef.current.debug = debug;
+    return () => {
+      editorRef.current?.destroy();
+      editorRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    if (!editorRef.current) return;
+    editorRef.current.updateColumns(adaptedData.columns);
+  }, [adaptedData.columns, editorRef]);
+  useEffect(() => {
+    if (!editorRef.current) return;
+    const highlight = adaptedData.highlight;
+    const highlightCellsGroup = Object.entries(highlight).map(([styleKey, cells]) => {
+      return {
+        styleKey,
+        cells
+      };
+    });
+    highlightCellsGroup.forEach((group) => {
+      if (!editorRef.current) return;
+      const cells = group.cells.map((cell) => {
+        if (cell.type === "cell") return { row: cell.row, col: cell.col };
+        else if (cell.type === "row") {
+          return {
+            range: {
+              start: { col: 0 + 1, row: cell.row + 1 },
+              end: { col: editorRef.current.colCount, row: cell.row }
+            }
+          };
+        } else if (cell.type === "column") {
+          return {
+            range: {
+              start: { col: cell.col, row: 0 },
+              end: { col: cell.col, row: editorRef.current.rowCount }
+            }
+          };
+        } else throw new Error(`Unknown cell type ${cell.type}`);
+      });
+      editorRef.current.highlightCells(group.styleKey, cells);
+    });
+    editorRef.current.innerColumnControl = innerColumnControlState;
+    editorRef.current.updateColumns(adaptedData.columns);
+  }, [editorRef, adaptedData.highlight, innerColumnControlState, adaptedData.columns]);
+  const [recordCount, setRecordCount] = useState(adaptedData.records.length);
+  useEffect(() => {
+    if (!editorRef.current) {
+      setRecordCount(0);
+      return;
+    }
+    const sizeUpdate = () => {
+      if (!editorRef.current) setRecordCount(0);
+      else setRecordCount(window.store.get(editorRef.current.recordsManager.size));
+    };
+    const cancel = window.store.sub(editorRef.current.recordsManager.size, sizeUpdate);
+    return () => cancel();
+  }, [editorRef, adaptedData.records, recordCount]);
+  const calcHeight = useMemo(() => {
+    if (!maxHeight) return "100%";
+    const calHeight = recordCount * TABLE_DEFAULT_ROW_HEIGHT + TABLE_DEFAULT_ROW_HEIGHT + 2;
+    const height = max([min([calHeight, maxHeight]), TABLE_DEFAULT_ROW_HEIGHT]);
+    return height;
+  }, [recordCount, maxHeight]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      contentEditable: false,
+      className: `table-wrapper`,
+      style: { width: "100%", height: calcHeight, position: "relative" }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "table-container", ref: containerRef, style: { width: "100%", height: "100%" } }),
+    /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableSelectEditor, null), /* @__PURE__ */ React.createElement(LinkEditor, null), /* @__PURE__ */ React.createElement(UserShow, null), /* @__PURE__ */ React.createElement(DateSelect, null), /* @__PURE__ */ React.createElement(TextEditor, null), /* @__PURE__ */ React.createElement(NumEditor, null), /* @__PURE__ */ React.createElement(TableJsonEditor, null)),
+    /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CellContextMenu, null), /* @__PURE__ */ React.createElement(HeaderContextMenu, null), /* @__PURE__ */ React.createElement(MoreContextMenu, null))
+  );
+};
+const TableLayout = () => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableView, null), /* @__PURE__ */ React.createElement(Hotkeys, null));
+};
+const Table = (props) => {
+  return /* @__PURE__ */ React.createElement(VTableProvider, { ...props }, /* @__PURE__ */ React.createElement(TableLayout, null));
+};
+
+const MenuItemInputLabel = ({ icon, direction, type, onCellClick, disabled }) => {
+  const menu = useMenu();
+  const tableEditor = useActiveEditorTable();
+  if (!menu) throw new Error("menu \u5FC5\u987B\u5B58\u5728");
+  if (!tableEditor) throw new Error("tableEditor \u5FC5\u987B\u5B58\u5728");
+  const [inputValue, setInputValue] = useState(1);
+  const directionLabel = useMemo(() => {
+    if (direction === "left") return "\u5DE6";
+    if (direction === "right") return "\u53F3";
+    if (direction === "up") return "\u4E0A";
+    if (direction === "down") return "\u4E0B";
+  }, [direction]);
+  const onClick = (e) => {
+    onCellClick?.({ cell: menu.cell, tableEditor, e }, inputValue);
+  };
+  return /* @__PURE__ */ React.createElement(Flex, { align: "center", onClick, gap: 10 }, icon, /* @__PURE__ */ React.createElement(Flex, { gap: 10, style: { width: "100%" }, align: "center" }, /* @__PURE__ */ React.createElement("span", null, "\u5411", directionLabel, "\u63D2\u5165"), /* @__PURE__ */ React.createElement(
+    InputNumber,
+    {
+      defaultValue: 1,
+      disabled,
+      rootClassName: "menu-item-label-input",
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      style: { width: 40 },
+      value: inputValue,
+      onChange: (value) => setInputValue(value || 1),
+      controls: false
+    }
+  ), /* @__PURE__ */ React.createElement("span", null, type === "row" ? "\u884C" : "\u5217")));
+};
+
+function initEditorTool(type, value) {
+  switch (type) {
+    case 30:
+    case 29:
+      initSelectEditorTool(value);
+      break;
+    case 33:
+      initLinkEditorTool(value);
+      break;
+    case 36:
+      initDateEditorTool(value);
+      break;
+    case 31:
+      initNumEditorTool(value);
+      break;
+    case 28:
+      initTextEditorTool(value);
+      break;
+    case 34:
+      initJsonEditorTool(value);
+      break;
+    case 38:
+      break;
+    default:
+      throw new Error(`[initEditorTool] \u4E0D\u652F\u6301\u7684\u5DE5\u5177\u7C7B\u578B ${type}`);
+  }
+}
+const clearEditorTool = () => {
+  clearSelectEditorTool();
+  clearLinkEditorTool();
+  clearDateEditorTool();
+  clearTextEditorTool();
+  clearNumEditorTool();
+  clearJsonEditorTool();
+};
+
+class DateSelectEditorTool {
+  onStart(props) {
+    const { col, row, table, value, endEdit } = props;
+    this.row = row;
+    this.col = col;
+    this.table = table;
+    this.oldValue = value;
+    const rect = table.getCellRelativeRect?.(col, row);
+    if (!rect) throw new Error("[DateSelectEditorTool::onStart] rect is Nil");
+    initEditorTool(36, {
+      cell: {
+        col,
+        row,
+        position: { x: rect.left, y: rect.top },
+        width: rect.width,
+        height: rect.height
+      },
+      endEdit,
+      table,
+      initialValue: value?.value
+    });
+  }
+  //校验
+  validateValue(newValue, oldValue) {
+    this.newValue = newValue;
+    this.oldValue = oldValue;
+    return ValidateEnum.invalidateExit;
+  }
+  setValue() {
+  }
+  // 结束编辑时触发，返回编辑后的值
+  getValue() {
+    return { ...this.oldValue, value: getDateEditorValue() };
+  }
+  // 退出编辑状态
+  onEnd() {
+    const tableEditor = getActiveEditorTable();
+    if (isNil(this.col) || isNil(this.row)) return;
+    if (!tableEditor) {
+      throw new Error("[DateSelectEditorTool::onEnd] tableEditor is Nil");
+    }
+    const command = new EditTableCellDataCommand(tableEditor, this.col, this.row, this.newValue, this.oldValue);
+    tableEditor.commandManager.execute(command);
+    clearEditorTool();
+  }
+  isEditorElement(target) {
+    return !!target.closest(".ant-picker-dropdown");
+  }
+}
+
+class JsonEditorTool {
+  // 双击单元格触发，进入编辑状态
+  onStart(props) {
+    const { col, row, table, value, endEdit } = props;
+    this.row = row;
+    this.col = col;
+    this.table = table;
+    this.oldValue = value;
+    const rect = table.getCellRelativeRect(col, row);
+    if (!rect) throw new Error("[LinkEditor::onStart] rect is Nil");
+    initEditorTool(34, {
+      cell: {
+        col,
+        row,
+        position: { x: rect.left, y: rect.top },
+        width: rect.width,
+        height: rect.height
+      },
+      endEdit,
+      table,
+      initialValue: value?.value
+    });
+  }
+  validateValue(newValue, oldValue) {
+    this.newValue = newValue;
+    this.oldValue = oldValue;
+    return ValidateEnum.invalidateExit;
+  }
+  // 不可删除，否则会报错
+  setValue() {
+  }
+  // 结束编辑时触发，返回编辑后的值
+  getValue() {
+    return { ...this.oldValue, value: getJsonEditorValue() };
+  }
+  // 退出编辑状态
+  onEnd() {
+    if (isNil(this.col) || isNil(this.row)) return;
+    const tableEditor = getActiveEditorTable();
+    if (!tableEditor) throw new Error("[JsonEditor::onEnd] tableEditor is Nil");
+    if (isNil(this.col) || isNil(this.row)) throw new Error("[JsonEditor::onEnd] col or row is Nil");
+    const command = new EditTableCellDataCommand(tableEditor, this.col, this.row, this.newValue, this.oldValue);
+    tableEditor.commandManager.execute(command);
+    clearEditorTool();
+  }
+  /**
+   * 如果提供了此函数，VTable 将会在用户点击其他地方时调用此函数。
+   * 如果此函数返回了一个假值，VTable 将会调用 `onEnd` 并退出编辑状态。
+   * 如果未定义此函数或此函数返回了一个真值， VTable 将不会做任何事。
+   * 这意味着，你需要手动调用 `onStart` 中提供的 `endEdit` 来结束编辑模式。
+   */
+  isEditorElement(target) {
+    return !!target.closest(".json-editor-modal-container");
+  }
+}
+
+class LinkEditorTool {
+  // 双击单元格触发，进入编辑状态
+  onStart(props) {
+    const { col, row, table, value, endEdit } = props;
+    this.row = row;
+    this.col = col;
+    this.table = table;
+    this.oldValue = value;
+    const rect = table.getCellRelativeRect(col, row);
+    if (!rect) throw new Error("[LinkEditor::onStart] rect is Nil");
+    initEditorTool(33, {
+      cell: {
+        col,
+        row,
+        position: { x: rect.left, y: rect.top },
+        width: rect.width,
+        height: rect.height
+      },
+      endEdit,
+      table,
+      initialValue: value?.value
+    });
+  }
+  validateValue(newValue, oldValue) {
+    this.newValue = newValue;
+    this.oldValue = oldValue;
+    return ValidateEnum.invalidateExit;
+  }
+  // 不可删除，否则会报错
+  setValue() {
+  }
+  // 结束编辑时触发，返回编辑后的值
+  getValue() {
+    return { ...this.oldValue, value: getLinkEditorValue() };
+  }
+  // 退出编辑状态
+  onEnd() {
+    if (isNil(this.col) || isNil(this.row)) return;
+    const tableEditor = getActiveEditorTable();
+    if (!tableEditor) throw new Error("[LinkEditor::onEnd] tableEditor is Nil");
+    if (isNil(this.col) || isNil(this.row)) throw new Error("[LinkEditor::onEnd] col or row is Nil");
+    const command = new EditTableCellDataCommand(tableEditor, this.col, this.row, this.newValue, this.oldValue);
+    tableEditor.commandManager.execute(command);
+    clearEditorTool();
+  }
+  /**
+   * 如果提供了此函数，VTable 将会在用户点击其他地方时调用此函数。
+   * 如果此函数返回了一个假值，VTable 将会调用 `onEnd` 并退出编辑状态。
+   * 如果未定义此函数或此函数返回了一个真值， VTable 将不会做任何事。
+   * 这意味着，你需要手动调用 `onStart` 中提供的 `endEdit` 来结束编辑模式。
+   */
+  isEditorElement(target) {
+    return !!target.closest(".link-editor-popover-root") || !!target.closest(".link-editor-popover");
+  }
+}
+
+class NumEditorTool {
+  // 双击单元格触发，进入编辑状态
+  onStart(props) {
+    const { col, row, table, value, endEdit } = props;
+    this.row = row;
+    this.col = col;
+    this.oldValue = value;
+    const rect = table.getCellRelativeRect(col, row);
+    if (!rect) throw new Error("[NumEditor::onStart] rect is Nil");
+    initEditorTool(31, {
+      endEdit,
+      initialValue: value?.value,
+      table,
+      cell: {
+        col,
+        row,
+        position: { x: rect.left, y: rect.top },
+        width: rect.width,
+        height: rect.height
+      }
+    });
+  }
+  validateValue(newValue, oldValue) {
+    this.newValue = newValue;
+    this.oldValue = oldValue;
+    return ValidateEnum.invalidateExit;
+  }
+  setValue() {
+  }
+  // 结束编辑时触发，返回编辑后的值
+  getValue() {
+    return { ...this.oldValue, value: getNumEditorValue() };
+  }
+  // 退出编辑状态
+  onEnd() {
+    if (isNil(this.col) || isNil(this.row)) return;
+    const tableEditor = getActiveEditorTable();
+    if (!tableEditor) throw new Error("[NumEditor::onEnd] tableEditor is Nil");
+    if (isNil(this.col) || isNil(this.row)) throw new Error("[NumEditor::onEnd] col or row is Nil");
+    const command = new EditTableCellDataCommand(tableEditor, this.col, this.row, this.newValue, this.oldValue);
+    tableEditor.commandManager.execute(command);
+    clearEditorTool();
+  }
+  isEditorElement(target) {
+    return target.className.includes("ant-input-number");
+  }
+}
+
+class MultiSelectEditorTool {
+  // 双击单元格触发，进入编辑状态
+  onStart(props) {
+    const { col, row, table, value, endEdit } = props;
+    this.table = table;
+    this.col = col;
+    this.row = row;
+    this.oldValue = value;
+    const rect = table.getCellRelativeRect(col, row);
+    if (!rect) throw new Error("[MultiSelectEditor::onStart] rect is Nil");
+    const options = table.getBodyColumnDefine(col, 0)?.options || [];
+    initEditorTool(30, {
+      initialValue: value?.value ?? [],
+      endEdit,
+      options,
+      table,
+      cell: {
+        col,
+        row,
+        position: { x: rect.left, y: rect.top },
+        width: rect.width,
+        height: rect.height
+      },
+      isMultiple: true
+    });
+  }
+  validateValue(newValue, oldValue) {
+    this.newValue = newValue;
+    this.oldValue = oldValue;
+    return ValidateEnum.invalidateExit;
+  }
+  setValue() {
+  }
+  // 结束编辑时触发，返回编辑后的值
+  getValue() {
+    return { ...this.oldValue, value: getSelectEditorValue() };
+  }
+  // 退出编辑状态
+  onEnd() {
+    clearEditorTool();
+  }
+  /**
+   * 如果提供了此函数，VTable 将会在用户点击其他地方时调用此函数。
+   * 如果此函数返回了一个假值，VTable 将会调用 `onEnd` 并退出编辑状态。
+   * 如果未定义此函数或此函数返回了一个真值， VTable 将不会做任何事。
+   * 这意味着，你需要手动调用 `onStart` 中提供的 `endEdit` 来结束编辑模式。
+   */
+  isEditorElement(target) {
+    return !!target.closest(".multi-select-editor-popover-root") || !!target.closest(".multi-select-editor-popover") || !!target.closest(".selector-color-picker") || !!target.closest(".option-item-modal");
+  }
+}
+
+class SingleSelectEditorTool {
+  // 双击单元格触发，进入编辑状态
+  onStart(props) {
+    const { col, row, table, value, endEdit } = props;
+    this.table = table;
+    this.col = col;
+    this.row = row;
+    this.oldValue = value;
+    const rect = table.getCellRelativeRect(col, row);
+    if (!rect) throw new Error("[SingleSelectEditor::onStart] rect is Nil");
+    const options = table.getBodyColumnDefine(col, 0)?.options || [];
+    initEditorTool(29, {
+      initialValue: value?.value ?? [],
+      endEdit,
+      options,
+      table,
+      cell: {
+        col,
+        row,
+        position: { x: rect.left, y: rect.top },
+        width: rect.width,
+        height: rect.height
+      },
+      isMultiple: false
+    });
+  }
+  validateValue(newValue, oldValue) {
+    this.newValue = newValue;
+    this.oldValue = oldValue;
+    return ValidateEnum.invalidateExit;
+  }
+  setValue() {
+  }
+  // 结束编辑时触发，返回编辑后的值
+  getValue() {
+    return { ...this.oldValue, value: getSelectEditorValue() };
+  }
+  // 退出编辑状态
+  onEnd() {
+    clearEditorTool();
+  }
+  /**
+   * 如果提供了此函数，VTable 将会在用户点击其他地方时调用此函数。
+   * 如果此函数返回了一个假值，VTable 将会调用 `onEnd` 并退出编辑状态。
+   * 如果未定义此函数或此函数返回了一个真值， VTable 将不会做任何事。
+   * 这意味着，你需要手动调用 `onStart` 中提供的 `endEdit` 来结束编辑模式。
+   */
+  isEditorElement(target) {
+    return !!target.closest(".multi-select-editor-popover-root") || !!target.closest(".multi-select-editor-popover") || !!target.closest(".selector-color-picker") || !!target.closest(".option-item-modal");
+  }
+}
+
+class TextEditorTool {
+  // 双击单元格触发，进入编辑状态
+  onStart(props) {
+    const { col, row, table, value, endEdit } = props;
+    this.row = row;
+    this.col = col;
+    this.oldValue = value;
+    const rect = table.getCellRelativeRect(col, row);
+    if (!rect) throw new Error("[TextEditor::onStart] rect is Nil");
+    initEditorTool(28, {
+      endEdit,
+      initialValue: value?.value ?? "",
+      table,
+      cell: {
+        col,
+        row,
+        position: { x: rect.left, y: rect.top },
+        width: rect.width,
+        height: rect.height
+      }
+    });
+  }
+  validateValue(newValue, oldValue) {
+    this.newValue = newValue;
+    this.oldValue = oldValue;
+    return ValidateEnum.invalidateExit;
+  }
+  setValue() {
+  }
+  // 结束编辑时触发，返回编辑后的值
+  getValue() {
+    return { ...this.oldValue, value: getTextEditorValue() };
+  }
+  // 退出编辑状态
+  onEnd() {
+    if (isNil(this.col) || isNil(this.row)) return;
+    const tableEditor = getActiveEditorTable();
+    if (!tableEditor) throw new Error("[TextEditor::onEnd] tableEditor is Nil");
+    if (isNil(this.col) || isNil(this.row)) throw new Error("[TextEditor::onEnd] col or row is Nil");
+    const command = new EditTableCellDataCommand(tableEditor, this.col, this.row, this.newValue, this.oldValue);
+    tableEditor.commandManager.execute(command);
+    clearEditorTool();
+  }
+  isEditorElement(target) {
+    return target.className.includes("ant-input");
+  }
+}
+
+const inputEditor = new VTable_editors.InputEditor();
+const dateInputEditor = new VTable_editors.DateInputEditor();
+const textAreaEditor = new VTable_editors.TextAreaEditor({ readonly: false });
+const linkEditor = new LinkEditorTool();
+const dateRangeEditor = new DateSelectEditorTool();
+const textEditor = new TextEditorTool();
+const numberEditor = new NumEditorTool();
+const multiSelectEditor = new MultiSelectEditorTool();
+const singleSelectEditor = new SingleSelectEditorTool();
+const jsonEditor = new JsonEditorTool();
+const editorRegistry = () => {
+  VTable.register.editor("inputEditor", inputEditor);
+  VTable.register.editor("dateInputEditor", dateInputEditor);
+  VTable.register.editor("textAreaEditor", textAreaEditor);
+  VTable.register.editor("multiSelectEditor", multiSelectEditor);
+  VTable.register.editor("linkEditor", linkEditor);
+  VTable.register.editor("dateInputEditor", dateRangeEditor);
+  VTable.register.editor("textEditor", textEditor);
+  VTable.register.editor("numberEditor", numberEditor);
+  VTable.register.editor("singleSelectEditor", singleSelectEditor);
+  VTable.register.editor("jsonEditor", jsonEditor);
+};
+
+const padding = 4;
+const createIconGraphics = (name, props) => {
+  const { disabled, cursor, x = 0, y = 0, size = 20, color = COLOR_ICON, hoverBg, onClick } = props ?? {};
+  const u = EnableAIBaseFontIcon.get(name, "unicode");
+  const group = createGroup({
+    display: "flex",
+    x,
+    y,
+    width: size + padding,
+    height: size + padding,
+    cornerRadius: 4,
+    cursor: disabled ? void 0 : cursor,
+    alignContent: "center",
+    alignItems: "center",
+    justifyContent: "center"
+  });
+  const text = createText({
+    text: u,
+    fontSize: size,
+    fontFamily: EnableAIBaseFontIcon.fontFamily,
+    fill: color,
+    cursor: disabled ? void 0 : cursor,
+    textBaseline: "alphabetic"
+  });
+  if (hoverBg && !disabled) {
+    group.addEventListener("mouseover", () => {
+      group.setAttribute("background", "#f0f0f0");
+      group.stage?.renderNextFrame();
+    });
+    group.addEventListener("mouseleave", () => {
+      group.setAttribute("background", "");
+      group.stage?.renderNextFrame();
+    });
+    if (onClick) group.addEventListener("click", onClick);
+  }
+  group.add(text);
+  return group;
+};
+
+const createPlusHeaderGraphics = (props) => {
+  const { table, row, col, rect } = props;
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const group = createGroup({
+    display: "flex",
+    alignContent: "center",
+    alignItems: "center",
+    justifyContent: "center",
+    width,
+    height,
+    cursor: "pointer"
+  });
+  const icon = createIconGraphics("plus", {
+    cursor: "pointer"
+  });
+  group.add(icon);
+  group.addEventListener("click", () => {
+    const editor = getActiveEditorTable();
+    if (!editor) throw new Error("[createPlusHeaderGraphics::onClick]editor is not found");
+    editor.dispatch("column::add::from::inner::plus", {
+      editor
+    });
+  });
+  return group;
+};
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+const FIXED_TIMEZONE_LABEL = "(GMT+8)";
+const createDateGraphics = (props) => {
+  const { table, row, col, rect } = props;
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const loading = !!props.value?.loading;
+  const columnDefine = table.getBodyColumnDefine(col, row);
+  const type = columnDefine.fmt;
+  const cellStyle = table._getCellStyle(col, row);
+  const functionalFontSize = getProp("fontSize", cellStyle, col, row, table);
+  const functionalColor = getProp("color", cellStyle, col, row, table);
+  const headerIconSize = getIconSizeFromFont(functionalFontSize);
+  const padding = [5, 10];
+  const group = createGroup({
+    width,
+    height,
+    display: "flex",
+    flexWrap: "nowrap",
+    justifyContent: "flex-start",
+    alignContent: "center",
+    alignItems: "center"
+  });
+  const value = props.value?.value ?? "";
+  const getPureDateFormat = (format) => {
+    return format.replace(/\s*\(GMT\+8\)$/i, "").replace(/\s*\(G1T\+8\)$/i, "").replace(/\s*\(G10T\+8\)$/i, "").replace(/G1T\+8/gi, "").replace(/G10T\+8/gi, "").trim();
+  };
+  const formattedValue1 = (() => {
+    const cleanedValue = value && value?.replace(/\s*\([^)]+\)$/gi, "").replace(/：/g, ":").replace(/\s+/g, " ").replace(/（|）/g, "").replace(/[\u200B-\u200D\uFEFF]/g, "").replace(/[^0-9\/\-\s:]/g, "");
+    const pureDateTimeMatch = cleanedValue.match(/(\d{4}[-\/]\d{2}[-\/]\d{2}(?:\s+\d{2}:\d{2})?)/);
+    const pureDateTime = pureDateTimeMatch?.[1]?.trim() || "";
+    if (!pureDateTime) return "";
+    const pureDateFormat = getPureDateFormat(type);
+    if (!pureDateFormat) return "";
+    const parseFormats = [pureDateFormat, "YYYY/MM/DD HH:mm", "YYYY-MM-DD HH:mm", "YYYY/MM/DD", "YYYY-MM-DD"];
+    let finalParsedDate = dayjs(pureDateTime, parseFormats[0], true);
+    for (const format of parseFormats.slice(1)) {
+      if (!finalParsedDate.isValid()) {
+        finalParsedDate = dayjs(pureDateTime, format, true);
+      } else break;
+    }
+    if (!finalParsedDate.isValid()) return "";
+    const pureFormattedDate = finalParsedDate.format(pureDateFormat);
+    return type.includes("GMT+8") || type.includes("G1T+8") || type.includes("G10T+8") ? pureFormattedDate + " " + FIXED_TIMEZONE_LABEL : pureFormattedDate;
+  })();
+  const text = createText({
+    fontSize: headerIconSize,
+    fontFamily: "sans-serif",
+    text: formattedValue1,
+    fill: functionalColor,
+    maxLineWidth: width - padding[1] * 2,
+    boundsPadding: [5, 12, 5, 10]
+  });
+  group.add(text);
+  return createGraphicsWithLoading(group, loading);
+};
+
+const createLinkGraphics = (props) => {
+  const { value, table, rect, col, row } = props;
+  const { title, url } = value?.value ?? {};
+  const loading = value?.loading ?? false;
+  const padding = [5, 10];
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const group = createGroup({
+    width,
+    height,
+    display: "flex",
+    flexWrap: "nowrap",
+    justifyContent: "space-around",
+    alignContent: "center",
+    alignItems: "center"
+    // 垂直居中
+  });
+  const text = createText({
+    fontSize: 12,
+    fontFamily: "sans-serif",
+    text: title,
+    fill: COLOR_LINK,
+    cursor: "pointer",
+    maxLineWidth: width - padding[1] * 2,
+    boundsPadding: [5, 12, 5, 10]
+  });
+  text.addEventListener("click", () => window.open(url));
+  text.addEventListener("mouseover", () => {
+    text.setAttribute("underline", 1);
+    text.stage?.renderNextFrame();
+  });
+  text.addEventListener("mouseleave", () => {
+    text.setAttribute("underline", 0);
+    text.stage?.renderNextFrame();
+  });
+  group.add(text);
+  return createGraphicsWithLoading(group, loading);
+};
+
+const createMainColumnCellGraphics = (props) => {
+  const { row, col, rect, table } = props;
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const loading = !!props.value?.loading;
+  const cellStyle = table._getCellStyle(col, row);
+  const functionalFontSize = getProp("fontSize", cellStyle, col, row, table);
+  const group = createGroup({
+    width,
+    height,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  });
+  const text = createText({
+    fontSize: functionalFontSize,
+    text: props.value?.value ?? "",
+    fill: getProp("color", cellStyle, col, row, table),
+    cursor: "pointer",
+    maxLineWidth: width - 30
+  });
+  group.add(text);
+  const ig = createGroup({
+    width: 30,
+    height,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  });
+  const detailIcon = createIconGraphics("drawer", {
+    hoverBg: true,
+    cursor: "pointer",
+    size: functionalFontSize,
+    onClick: () => {
+      const editor = getActiveEditorTable();
+      if (!editor) throw new Error("createMainColumnCellGraphics::detailIcon onclick \u672A\u83B7\u53D6\u5230activeEditorTable");
+      const { recordId } = editor.getInteractiveCell(col, row);
+      editor.dispatch("record::open::detail::drawer", { editor, recordId });
+    }
+  });
+  ig.add(detailIcon);
+  ig.removeChild(detailIcon);
+  group.addEventListener("mouseover", () => {
+    ig.setAttribute("visible", true);
+    ig.add(detailIcon);
+    group.stage?.renderNextFrame();
+  });
+  group.addEventListener("mouseleave", () => {
+    ig.setAttribute("visible", false);
+    ig.removeChild(detailIcon);
+    group.stage?.renderNextFrame();
+  });
+  group.add(ig);
+  return createGraphicsWithLoading(group, loading);
+};
+
+const createMoreGraphics = (props) => {
+  const { onClick, onCancel, record, row, col, table, rect, value } = props;
+  const loading = !!value?.loading;
+  const cellStyle = table._getCellStyle(col, row);
+  const functionalFontSize = getProp("fontSize", cellStyle, col, row, table);
+  const functionalColor = getProp("color", cellStyle, col, row, table);
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const group = createGroup({
+    width,
+    height,
+    display: "flex",
+    cursor: "pointer",
+    justifyContent: "center",
+    alignItems: "center"
+  });
+  const icon = createIconGraphics("more", {
+    size: getIconSizeFromFont(functionalFontSize),
+    color: functionalColor,
+    x: (width - 16) / 2,
+    y: (height - 16) / 2,
+    cursor: "pointer"
+  });
+  const handleEvent = (evt) => {
+    evt.stopPropagation();
+    const x = evt.clientX || evt.x || 0;
+    const y = evt.clientY || evt.y || 0;
+    onClick?.({ row, col, record, x, y });
+    const rect2 = table.getCellRelativeRect(col, row);
+    const tableEditor = getActiveEditorTable();
+    if (!tableEditor) throw new Error("tableEditor \u4E0D\u5B58\u5728");
+    const { recordId, columnId } = tableEditor.getInteractiveCell(row, col);
+    setMenu({
+      open: true,
+      position: { x: rect2.left + width / 2 - 8, y: rect2.top + height / 2 - 8 },
+      type: "more",
+      cell: { col, row, recordId, columnId, rect: rect2 }
+    });
+  };
+  const handleCancel = (evt) => {
+    evt.stopPropagation();
+    onCancel?.();
+    setMenu(null);
+  };
+  group.addEventListener("pointerenter", handleEvent);
+  group.addEventListener("pointermove", handleEvent);
+  group.addEventListener("click", handleEvent);
+  group.addEventListener("pointerleave", handleCancel);
+  group.add(icon);
+  return createGraphicsWithLoading(group, loading);
+};
+
+const formatTagItem = (value, options, tableInstance) => {
+  const {
+    blankWidth = 16,
+    fontWeight = 400,
+    fontSize,
+    fontColor = "black",
+    fontFamily = "PingFang SC",
+    basePadding = 16 * 2,
+    tagMinWidth = 48,
+    cellWidth
+  } = options;
+  const tagMaxWidth = Math.max(cellWidth - basePadding, tagMinWidth);
+  const item = {
+    label: value.label,
+    value: value.value
+  };
+  const label = (item.label || "").replace(/[\u200B\u2060]/g, "");
+  const { width } = tableInstance.measureText(label, {
+    fontSize,
+    fontWeight,
+    fontFamily
+  });
+  const textLength = Math.ceil(width) + blankWidth;
+  const tagWidth = Math.min(Math.max(textLength, tagMinWidth), tagMaxWidth);
+  if (!item.tagProps) {
+    item.tagProps = {
+      fontColor,
+      backgroundColor: value.color,
+      width: 0
+    };
+  }
+  item.tagProps.width = tagWidth;
+  return {
+    textLength,
+    tagWidth,
+    tagMaxWidth,
+    tagMinWidth,
+    item
+  };
+};
+
+const TAG_HEIGHT$2 = 18;
+const TAG_GAP = 8;
+const NUMBER_WIDTH = 25;
+const TAG_MIN_WIDTH$2 = TAG_GAP + NUMBER_WIDTH;
+const getTagsRowMap = (tags, options, tableInstance) => {
+  const res = calcCellTags(
+    tags,
+    {
+      cellWidth: options.cellWidth,
+      fontSize: options.fontSize,
+      blankWidth: options.blankWidth,
+      tagMinWidth: TAG_MIN_WIDTH$2
+    },
+    tableInstance
+  );
+  return res.filterTagsRowMap;
+};
+const calcCellTags = (tags = [], options, tableInstance) => {
+  if (!tags.length) return { filterTags: [], filterTagsRowMap: {} };
+  const data = cloneDeep(tags);
+  const filterTags = [];
+  const filterTagsRowMap = {};
+  const numberTagWidth = TAG_GAP + NUMBER_WIDTH;
+  const len = data.length;
+  let totalWidth = 0;
+  const currentRow = 1;
+  const addTags = (item) => {
+    filterTags.push(item);
+    if (!filterTagsRowMap[currentRow]) {
+      filterTagsRowMap[currentRow] = [];
+    }
+    filterTagsRowMap[currentRow].push(item);
+  };
+  if (len === 1) {
+    const { item } = formatTagItem(data[0], options, tableInstance);
+    addTags(item);
+  } else if (len > 1) {
+    for (let i = 0; i < len; i += 1) {
+      const { item, tagMaxWidth, tagMinWidth, tagWidth } = formatTagItem(data[i], options, tableInstance);
+      const handlePushItem = (item2) => {
+        const calcWidth = totalWidth + tagMinWidth + (i === len - 1 ? 0 : numberTagWidth);
+        if (tagMaxWidth >= calcWidth) {
+          const realTextWidth = Math.min(tagWidth, tagMaxWidth - totalWidth - (i === len - 1 ? 0 : numberTagWidth));
+          item2.tagProps.width = realTextWidth;
+          totalWidth = totalWidth + realTextWidth + TAG_GAP;
+          addTags(item2);
+          return false;
+        } else if (tagMaxWidth < calcWidth) {
+          if (tagMaxWidth < totalWidth + tagMinWidth + numberTagWidth) {
+            addTags({
+              label: "+" + (len - filterTags.length),
+              value: -1,
+              tagProps: {
+                fontColor: "#404A59",
+                backgroundColor: "#eff0f1",
+                width: TAG_MIN_WIDTH$2
+              }
+            });
+            return true;
+          }
+          if (i === len - 1) {
+            item2.tagProps.width = Math.min(tagWidth, tagMaxWidth - totalWidth);
+            addTags(item2);
+          } else {
+            item2.tagProps.width = Math.min(tagWidth, tagMaxWidth - totalWidth - numberTagWidth);
+            addTags(item2);
+            addTags({
+              label: "+" + (len - filterTags.length),
+              value: -1,
+              tagProps: {
+                fontColor: "#404A59",
+                backgroundColor: "#eff0f1",
+                width: NUMBER_WIDTH
+              }
+            });
+          }
+          return true;
+        }
+      };
+      if (handlePushItem(item)) break;
+    }
+  }
+  return { filterTags, filterTagsRowMap };
+};
+const createMultiSelectGraphic = (props) => {
+  const { width, height, table, col, row } = props;
+  const value = props.value?.value ?? [];
+  const loading = !!props.value?.loading;
+  const styles = table._getCellStyle(col, row);
+  const options = table.getBodyColumnDefine(col, 0).options || [];
+  const newValue = value.map((item) => {
+    return options.find((option) => option.value === item.value);
+  }).filter(Boolean);
+  const fontSize = getProp("fontSize", styles, col, row, table);
+  const tagsMap = getTagsRowMap(newValue, { cellWidth: width, blankWidth: 16, fontSize }, table) || {};
+  const container = /* @__PURE__ */ React.createElement(
+    VGroup,
+    {
+      attribute: {
+        width: width - 32,
+        height,
+        display: "flex",
+        alignItems: "center",
+        alignContent: "center",
+        dx: 16
+      }
+    },
+    Object.keys(tagsMap).map((key) => {
+      const tag = tagsMap[Number(key)];
+      return /* @__PURE__ */ React.createElement(
+        VGroup,
+        {
+          key,
+          attribute: {
+            width: width - 32,
+            height: TAG_HEIGHT$2,
+            display: "flex",
+            alignItems: "center",
+            flexWrap: "nowrap",
+            overflow: "hidden",
+            boundsPadding: [4, 0, 4, 0]
+          }
+        },
+        tag.map((item, subIndex) => {
+          return /* @__PURE__ */ React.createElement(
+            VGroup,
+            {
+              key: item.value,
+              attribute: {
+                width: item.tagProps.width,
+                height: TAG_HEIGHT$2,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden",
+                cornerRadius: TAG_HEIGHT$2 / 2,
+                fill: item.tagProps.backgroundColor,
+                boundsPadding: subIndex > 0 ? [0, 0, 0, 8] : 0
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              VText,
+              {
+                attribute: {
+                  text: item.label,
+                  fontSize,
+                  fill: getTextColorForBackground(item.tagProps.backgroundColor || "#000000"),
+                  textAlign: "left",
+                  textBaseline: "top",
+                  maxLineWidth: item.tagProps.width - 16
+                }
+              }
+            )
+          );
+        })
+      );
+    })
+  );
+  return createGraphicsWithLoading(container, loading);
+};
+
+const createNumberGraphics = (props) => {
+  const { row, col, table, rect, textAlign = "right" } = props;
+  const columnDefine = table.getBodyColumnDefine(col, row);
+  const fmt = columnDefine.fmt ?? "integer";
+  const value = props.value?.value;
+  const loading = !!props.value?.loading;
+  const cellStyle = table._getCellStyle(col, row);
+  const fontSize = getProp("fontSize", cellStyle, col, row, table);
+  const functionalColor = getProp("color", cellStyle, col, row, table);
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const textValue = formatValue(value, fmt);
+  const padding = 10;
+  const group = createGroup({
+    width,
+    height
+  });
+  const text = createText({
+    text: textValue,
+    fill: functionalColor,
+    fontFamily: "sans-serif",
+    fontSize,
+    textBaseline: "middle",
+    y: height / 2,
+    maxLineWidth: width - padding * 2
+  });
+  if (textAlign === "left") {
+    text.setAttribute("x", padding);
+    text.setAttribute("textAlign", "left");
+  } else if (textAlign === "center") {
+    text.setAttribute("x", width / 2);
+    text.setAttribute("textAlign", "center");
+  } else {
+    text.setAttribute("x", width - padding);
+    text.setAttribute("textAlign", "right");
+  }
+  group.add(text);
+  return createGraphicsWithLoading(group, loading);
+};
+
+const getTextWidth = (text, fontSize) => {
+  const textElement = createText({
+    text,
+    fontSize
+  });
+  const bounds = textElement.AABBBounds;
+  return bounds.width();
+};
+
+const AVATAR_SIZE = 20;
+const GAP = 4;
+const ITEM_GAP = 8;
+const ELLIPSIS = "...";
+const ELLIPSIS_WIDTH = 8;
+const PADDING_LEFT = 15;
+const getName = (id, value) => {
+  if (id == -1) {
+    return "\u7CFB\u7EDF";
+  } else if (id == -2) {
+    return "\u65E0";
+  }
+  return value;
+};
+const createPeopleGraphics = (props) => {
+  const { row, col, rect, table } = props;
+  const cellStyle = table?._getCellStyle(col, row);
+  const functionalFontSize = getProp("fontSize", cellStyle, col, row, table);
+  const functionalColor = getProp("color", cellStyle, col, row, table);
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const group = createGroup({ width, height, x: 15, y: 0 });
+  const value = props.value?.value ?? [];
+  const loading = props.value?.loading ?? false;
+  const items = [];
+  let cursor = 0;
+  for (let i = 0; i < value.length; i++) {
+    const person = value[i];
+    const nameWidth = getTextWidth(getName(person.id, person.name), functionalFontSize);
+    const fullWidth = AVATAR_SIZE + GAP + nameWidth;
+    const remaining = width - cursor - PADDING_LEFT;
+    if (fullWidth <= remaining) {
+      items.push({ person, mode: "full" });
+      cursor += fullWidth + ITEM_GAP;
+      continue;
+    }
+    const minWidth = AVATAR_SIZE + GAP + ELLIPSIS_WIDTH;
+    if (remaining >= minWidth) {
+      const availableNameWidth = remaining - AVATAR_SIZE - GAP;
+      items.push({
+        person,
+        mode: "truncate",
+        availableNameWidth
+      });
+    }
+    break;
+  }
+  const hasMore = items.length < value.length;
+  let x = 0;
+  items.forEach((item) => {
+    const personGroup = renderPersonItem(item, x, height, functionalFontSize, functionalColor, table, {
+      row,
+      col,
+      width,
+      height
+    });
+    group.add(personGroup);
+    const nameW = item.mode === "full" ? getTextWidth(getName(item.person.id, item.person?.name ?? ""), functionalFontSize) : item.availableNameWidth ?? 0;
+    x += AVATAR_SIZE + GAP + nameW + ITEM_GAP;
+  });
+  if (hasMore) {
+    group.add(
+      createText({
+        x,
+        y: height / 2,
+        text: ELLIPSIS,
+        textBaseline: "middle",
+        fill: functionalColor || "#666",
+        fontSize: functionalFontSize
+      })
+    );
+  }
+  return createGraphicsWithLoading(group, loading);
+};
+function renderPersonItem(item, x, containerHeight, functionalFontSize, functionalColor, table, cell) {
+  const { person, mode, availableNameWidth } = item;
+  const y = (containerHeight - AVATAR_SIZE) / 2;
+  const g = createGroup({ x, y, height: AVATAR_SIZE });
+  if (person.id == -1 || person.id == -2) {
+    const avatarBg = createRect({
+      width: AVATAR_SIZE,
+      height: AVATAR_SIZE,
+      cornerRadius: AVATAR_SIZE / 2,
+      fill: person.id == -1 ? "#52c41a" : "#999"
+    });
+    g.add(avatarBg);
+    const avatarText = createText({
+      x: AVATAR_SIZE / 2,
+      y: AVATAR_SIZE / 2,
+      text: person.id == -1 ? "\u7CFB\u7EDF" : "\u65E0",
+      textBaseline: "middle",
+      textAlign: "center",
+      fill: "#fff",
+      fontSize: 8
+    });
+    g.add(avatarText);
+  } else if (person.avatar) {
+    const imageGraphics = createImage({
+      width: AVATAR_SIZE,
+      height: AVATAR_SIZE,
+      image: person.avatar,
+      cornerRadius: AVATAR_SIZE / 2
+    });
+    g.add(imageGraphics);
+  } else {
+    const avatarBg = createRect({
+      width: AVATAR_SIZE,
+      height: AVATAR_SIZE,
+      cornerRadius: AVATAR_SIZE / 2,
+      fill: getColorByStr(person.name?.slice(-2))
+    });
+    g.add(avatarBg);
+    const avatarText = createText({
+      x: AVATAR_SIZE / 2,
+      y: AVATAR_SIZE / 2,
+      text: (person.name?.length ?? 0) >= 2 ? person.name?.slice(-2) : person.name?.[0] ?? "?",
+      textBaseline: "middle",
+      textAlign: "center",
+      fill: "#fff",
+      fontSize: 8
+    });
+    g.add(avatarText);
+  }
+  if (table && cell && person.id !== -1 && person.id !== -2) {
+    g.on("mouseenter", () => {
+      const cellRect = table.getCellRelativeRect(cell.col, cell.row);
+      const avatarCenterX = cellRect.left + PADDING_LEFT + x + AVATAR_SIZE / 2;
+      const avatarCenterY = cellRect.top + y + AVATAR_SIZE / 2;
+      initUserShowTool({
+        cell: {
+          row: cell.row,
+          col: cell.col,
+          position: { x: avatarCenterX, y: avatarCenterY },
+          width: cell.width,
+          height: cell.height
+        },
+        table,
+        endEdit: () => {
+        },
+        id: person.id
+      });
+    });
+    g.on("mouseleave", () => {
+      clearUserShowTool();
+    });
+  }
+  let text = getName(person.id, person.name ?? "");
+  if (mode === "truncate" && availableNameWidth !== void 0 && person.id !== -1 && person.id !== -2) {
+    let left = 0;
+    let right = person.name?.length || 0;
+    let bestLength = 0;
+    while (left <= right) {
+      const mid = Math.floor((left + right) / 2);
+      const testText = person.name?.slice(0, mid) + ELLIPSIS;
+      const testWidth = getTextWidth(testText, functionalFontSize);
+      if (testWidth <= availableNameWidth) {
+        bestLength = mid;
+        left = mid + 1;
+      } else {
+        right = mid - 1;
+      }
+    }
+    text = bestLength > 0 ? person.name?.slice(0, bestLength) + ELLIPSIS : ELLIPSIS;
+  }
+  g.add(
+    createText({
+      x: AVATAR_SIZE + GAP,
+      y: AVATAR_SIZE / 2,
+      text,
+      textBaseline: "middle",
+      fill: functionalColor,
+      fontSize: functionalFontSize
+    })
+  );
+  return g;
+}
+
+const TAG_HEIGHT$1 = 18;
+const CELL_PADDING$1 = 16;
+const TAG_PADDING$1 = 8;
+const TAG_MIN_WIDTH$1 = 35;
+const createSingleSelectGraphic = (props) => {
+  const { table, col, row, rect } = props;
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const value = props.value?.value ?? [];
+  const loading = !!props.value?.loading;
+  const options = table.getBodyColumnDefine(col, 0).options || [];
+  const valueItem = options.find((option) => option.value === value[0]?.value);
+  if (!valueItem) {
+    return null;
+  }
+  const styles = table._getCellStyle(col, row);
+  const fontSize = getProp("fontSize", styles, col, row, table);
+  const { item } = formatTagItem(
+    valueItem,
+    {
+      cellWidth: width,
+      blankWidth: 16,
+      basePadding: CELL_PADDING$1 * 2,
+      tagMinWidth: TAG_MIN_WIDTH$1,
+      fontSize
+    },
+    table
+  );
+  const container = /* @__PURE__ */ React.createElement(
+    VGroup,
+    {
+      attribute: {
+        width: width - 32,
+        height,
+        display: "flex",
+        alignItems: "center",
+        alignContent: "center",
+        dx: 16
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      VGroup,
+      {
+        key: item.value,
+        attribute: {
+          width: item.tagProps.width,
+          height: TAG_HEIGHT$1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden",
+          cornerRadius: TAG_HEIGHT$1 / 2 - 1,
+          fill: item.tagProps.backgroundColor
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        VText,
+        {
+          attribute: {
+            text: item.label,
+            fontSize,
+            fill: getTextColorForBackground(item.tagProps.backgroundColor || "#000000"),
+            textAlign: "left",
+            textBaseline: "top",
+            maxLineWidth: item.tagProps.width - TAG_PADDING$1 * 2
+          }
+        }
+      )
+    )
+  );
+  return createGraphicsWithLoading(container, loading);
+};
+
+const TAG_HEIGHT = 18;
+const CELL_PADDING = 16;
+const TAG_PADDING = 8;
+const TAG_MIN_WIDTH = 40;
+const TAG_BACKGROUND_COLOR = "#FAFAFA";
+const createTagGraphic = (props) => {
+  const { table, row, col, rect } = props;
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const value = props.value?.value ?? "";
+  const loading = !!props.value?.loading;
+  const styles = table._getCellStyle(col, row);
+  const fontSize = getProp("fontSize", styles, col, row, table);
+  const { item } = formatTagItem(
+    { label: value, value, color: TAG_BACKGROUND_COLOR },
+    {
+      cellWidth: width,
+      blankWidth: 16,
+      basePadding: CELL_PADDING * 2,
+      tagMinWidth: TAG_MIN_WIDTH,
+      fontSize
+    },
+    table
+  );
+  const container = /* @__PURE__ */ React.createElement(
+    VGroup,
+    {
+      attribute: {
+        width: width - 32,
+        height,
+        display: "flex",
+        alignItems: "center",
+        alignContent: "center",
+        dx: 16
+      }
+    },
+    !isNil(props.value?.value) && /* @__PURE__ */ React.createElement(
+      VGroup,
+      {
+        key: item.value,
+        attribute: {
+          width: item.tagProps.width,
+          height: TAG_HEIGHT,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden",
+          cornerRadius: 4,
+          stroke: "#D9D9D9",
+          fill: item.tagProps.backgroundColor
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        VText,
+        {
+          attribute: {
+            text: item.label,
+            fontSize,
+            zIndex: 1e3,
+            textAlign: "left",
+            textBaseline: "top",
+            fill: item.tagProps.fontColor,
+            maxLineWidth: item.tagProps.width - TAG_PADDING * 2
+          }
+        }
+      )
+    )
+  );
+  return createGraphicsWithLoading(container, loading);
+};
+
+const createTimeLenGraphics = (props) => {
+  const { table, row, col, rect } = props;
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const padding = [5, 10];
+  const loading = props.value?.loading;
+  const value = props.value?.value;
+  const cellStyle = table._getCellStyle(col, row);
+  const functionalFontSize = getProp("fontSize", cellStyle, col, row, table);
+  const functionalColor = getProp("color", cellStyle, col, row, table);
+  const time = !isNil(value) ? formatDuration(value) : "";
+  const group = createGroup({
+    width,
+    height,
+    display: "flex",
+    flexWrap: "nowrap",
+    justifyContent: "space-around",
+    alignContent: "center",
+    alignItems: "center"
+    // 垂直居中
+  });
+  const text = createText({
+    fontSize: functionalFontSize,
+    fontFamily: "sans-serif",
+    text: time,
+    maxLineWidth: width - padding[1] * 2,
+    boundsPadding: [5, 12, 5, 10],
+    fill: functionalColor
+  });
+  group.add(text);
+  return createGraphicsWithLoading(group, !!loading);
+};
+
+const suffixToIconName = {
+  // 图片类型
+  png: "image-file",
+  jpg: "image-file",
+  jpeg: "image-file",
+  bmp: "image-file",
+  tif: "image-file",
+  tiff: "image-file",
+  heic: "image-file",
+  pdf: "pdf",
+  doc: "doc",
+  docs: "docs",
+  // 若枚举中没有 "docs"，改为 "doc"
+  ppt: "ppt",
+  mp4: "video-file",
+  mp3: "mp3",
+  csv: "csv"
+};
+const createUploadDocumentGraphics = (props) => {
+  const { table, row, col, rect } = props;
+  const { height, width } = rect ?? table.getCellRect(col, row);
+  const cellStyle = table._getCellStyle(col, row);
+  const functionalFontSize = getProp("fontSize", cellStyle, col, row, table);
+  const functionalColor = getProp("color", cellStyle, col, row, table);
+  const headerIconSize = getIconSizeFromFont(functionalFontSize);
+  const padding = [5, 10, 20];
+  const value = props.value?.value ?? [];
+  const loading = !!props.value?.loading;
+  const getFileIconName = () => {
+    if (value.length < 1) {
+      return "text";
+    }
+    const fileNameOnly = value[0]?.name.split("/").pop() || "";
+    const suffix = fileNameOnly.split(".").pop()?.toLowerCase() || "";
+    return suffixToIconName[suffix] || "text";
+  };
+  const group = createGroup({
+    width,
+    height,
+    display: "flex",
+    flexWrap: "nowrap",
+    justifyContent: "center",
+    alignContent: "center",
+    alignItems: "center"
+    // 垂直居中
+    // x: 15,
+  });
+  const uploadIcon = createIconGraphics("upload", { x: 0, y: 0, size: 14, color: functionalColor });
+  const text = createText({
+    fontSize: headerIconSize,
+    fontFamily: "sans-serif",
+    text: "\u70B9\u51FB\u4E0A\u4F20",
+    fill: functionalColor,
+    cursor: "pointer",
+    // TODO padding maxLineWidth 计算优化
+    maxLineWidth: width - padding[2] * 2 - uploadIcon.AABBBounds.width() - 12 - 5,
+    boundsPadding: [4, 12, 5, 5],
+    overflow: "hidden",
+    textBaseline: "middle"
+  });
+  const borderGroup = createGroup({
+    width: width - 30,
+    height: height - 8,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    stroke: "#D9D9D9",
+    cursor: "pointer"
+  });
+  borderGroup.add(uploadIcon);
+  borderGroup.add(text);
+  borderGroup.addEventListener("click", () => {
+    const columnDefine = table.getBodyColumnDefine(col, row);
+    const lock = columnDefine.lock;
+    const editor = getActiveEditorTable();
+    if (lock || editor?.lock) return;
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.style.display = "none";
+    fileInput.addEventListener("change", (e) => {
+      const target = e.target;
+      const files = target.files;
+      if (files && files.length > 0) {
+        const selectedFile = files[0];
+        console.log("\u7528\u6237\u9009\u62E9\u7684\u6587\u4EF6\uFF1A", selectedFile);
+        uploadFileToServer(selectedFile, col, row, props.value);
+      }
+      fileInput.value = "";
+    });
+    document.body.appendChild(fileInput);
+    fileInput.click();
+    setTimeout(() => {
+      document.body.removeChild(fileInput);
+    }, 100);
+  });
+  group.add(borderGroup);
+  const groupname = createGroup({
+    width,
+    height,
+    display: "flex",
+    flexWrap: "nowrap",
+    justifyContent: "flex-start",
+    // alignContent: 'center',
+    alignItems: "center",
+    // 垂直居中
+    x: 15
+  });
+  const uploadIconName = createIconGraphics(getFileIconName(), { x: 0, y: 0, size: 14, color: functionalColor });
+  const textname = createText({
+    fontSize: headerIconSize,
+    fontFamily: "sans-serif",
+    text: value.length > 0 ? value[0].name : "",
+    fill: functionalColor,
+    cursor: "pointer",
+    maxLineWidth: width - padding[2] * 2,
+    // marginLeft: 5,
+    boundsPadding: [4, 12, 5, 5]
+  });
+  groupname.add(uploadIconName);
+  groupname.add(textname);
+  groupname.addEventListener("click", () => {
+    const editor = getActiveEditorTable();
+    if (!editor) throw new Error("\u672A\u83B7\u53D6\u5230\u8868\u683C\u7F16\u8F91\u5668\u5B9E\u4F8B");
+    editor.dispatch("cell::attachment::preview", {
+      editor,
+      cellValue: props.value
+    });
+  });
+  if (value.length > 0) {
+    return createGraphicsWithLoading(groupname, loading);
+  } else {
+    return createGraphicsWithLoading(group, loading);
+  }
+};
+const uploadFileToServer = async (file, col, row, originValue) => {
+  const name = file.name;
+  const suffix = name.split(".").pop();
+  const column = getActiveEditorTable()?.getColumnDefine(col);
+  let getField;
+  if (column.field) {
+    getField = column.field;
+  }
+  try {
+    const editor = getActiveEditorTable();
+    if (!editor) {
+      throw new Error("\u672A\u83B7\u53D6\u5230\u8868\u683C\u7F16\u8F91\u5668\u5B9E\u4F8B");
+    }
+    const path = `dataset/base/table/upload/${getField}/${getUUID()}.${suffix}`;
+    editor.updateCellData(col, row, {
+      loading: true
+    });
+    editor.uploadFile(
+      {
+        file,
+        // 注意：需确保 formData 是后端/编辑器要求的文件类型（如 Blob、File、FormData 等）
+        type: file.type
+        // 类型标识，根据业务传如 'image'/'video'/'file' 等
+      },
+      path
+    ).then(() => {
+      console.log("\u4E0A\u4F20\u6210\u529F\uFF01\uFF01");
+      const tableEditor = getActiveEditorTable();
+      if (!tableEditor) throw new Error("[createUploadFileGraphics::onEnd] tableEditor is Nil");
+      const run = () => {
+        const oldData = { ...originValue, loading: false };
+        const { columnId, recordId } = tableEditor.getInteractiveCell(col, row);
+        const data = {
+          ...oldData,
+          loading: false,
+          value: [{ name, path }]
+        };
+        tableEditor.updateCellData(col, row, data);
+        tableEditor.dispatch("cells::update", {
+          editor: tableEditor,
+          data: [
+            {
+              current: data,
+              previous: oldData,
+              recordId,
+              columnId
+            }
+          ]
+        });
+        return {
+          restore: () => {
+            tableEditor.updateCellData(col, row, oldData);
+            tableEditor.dispatch("cells::update", {
+              editor: tableEditor,
+              data: [
+                {
+                  current: oldData,
+                  previous: data,
+                  recordId,
+                  columnId
+                }
+              ]
+            });
+          }
+        };
+      };
+      const command = new EditTableCellDataFunctionalCommand(tableEditor, run);
+      tableEditor.commandManager.execute(command);
+    }).catch((e) => {
+      console.log(e);
+    });
+  } catch (error) {
+    console.error("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF1A", error);
+  }
+};
+
+export { BaseTableInteractive, CellContextMenu, DateSelect, DateSelectEditorTool, EditTableCellDataCommand, EditTableCellDataFunctionalCommand, HeaderContextMenu, INNER_TABLE_COLUMN_KEY_CHECKBOX, INNER_TABLE_COLUMN_KEY_LIST, INNER_TABLE_COLUMN_KEY_PLUS, INNER_TABLE_RECORD_ID_KEY, JsonEditorTool, LinkEditor, LinkEditorTool, MenuItemInputLabel, MoreContextMenu, MultiSelectEditorTool, NumEditor, NumEditorTool, RecordsManager, SelectEditor, SingleSelectEditorTool, Table, TableChangeEvent, TableEditor, TableEditorEvent, TableJsonEditor, TableLayout, TableSelectEditor, TableView, TextEditor, TextEditorTool, UserShow, VTableEditorType, activeTableIdAtom, adaptColumnStructure, adaptRecordStructure, adaptRecordsStructure, adaptedCellPosition, attachmentColumnCreator, checkboxColumnCreator, clearDateEditorTool, clearEditorTool, clearJsonEditorTool, clearLinkEditorTool, clearNumEditorTool, clearSelectEditorTool, clearTextEditorTool, clearUserShowTool, createBaseTableEditor, createColumns, createDateGraphics, createDefaultColumnConfig, createGraphicsWithLoading, createHeaderGraphics, createIconGraphics, createJsonGraphics, createLinkGraphics, createMainColumnCellGraphics, createMoreGraphics, createMultiSelectGraphic, createNumberGraphics, createPeopleGraphics, createPlusHeaderGraphics, createSingleSelectGraphic, createTagGraphic, createTextGraphics, createTimeLenGraphics, createUploadDocumentGraphics, dateColumnCreator, dateProcess, dropdownColumnCreator, editorRegistry, editorTableStoreAtom, getActiveEditorTable, getActiveTableId, getColFromColIndex, getDateEditorData, getDateEditorValue, getEditorByToolType, getEditorTableStore, getFunctionalProp, getIconSizeFromFont, getJsonEditorData, getJsonEditorValue, getLinkEditorData, getLinkEditorValue, getMenu, getNumEditorData, getNumEditorValue, getProp, getRowFromRowIndex, getSelectEditorData, getSelectEditorValue, getTextEditorData, getTextEditorValue, getTextWidth, getUserShowData, getUserShowId, highlightMerge, initDateEditorTool, initEditorTool, initJsonEditorTool, initLinkEditorTool, initNumEditorTool, initSelectEditorTool, initTextEditorTool, initUserShowTool, isColumnEditable, jsonColumnCreator, linkColumnCreator, moreColumnCreator, multiSelectColumnCreator, numberColumnCreator, plusColumnCreator, revertRecordStructure, setActiveEditorTable, setActiveTableId, setDateEditorData, setDateEditorValue, setEditorTableStore, setJsonEditorData, setJsonEditorValue, setLinkEditorData, setLinkEditorValue, setMenu, setNumEditorData, setNumEditorValue, setSelectEditorData, setSelectEditorValue, setTextEditorData, setTextEditorValue, setUserShowData, setUserShowId, tagColumnCreator, theme, timeLenColumnCreator, updateSelectEditorCell, useActiveEditorTable, useActiveTableId, useComponentVTable, useDateEditorData, useDateEditorValue, useEditorTableStore, useJsonEditorData, useJsonEditorValue, useLinkEditorData, useLinkEditorValue, useMenu, useNumEditorData, useNumEditorValue, useSelectEditorData, useSelectEditorValue, useTextEditorData, useTextEditorValue, useUserShowData, useUserShowId, userColumnCreator };