create-react-admin-template 0.0.0-stage → 0.1.0

package/template/src/components/AppTable/engine/table/editing/validation.ts

@@ -0,0 +1,452 @@
+import { getTableDecimalMetrics } from '../../shared/decimal'
+import {
+  TABLE_ENGINE_MESSAGES_ZH_CN,
+  type TableEngineMessages,
+} from '../../shared/messages'
+import { getTableRowValue } from '../../shared/row'
+import {
+  TABLE_TASK_YIELD_INTERVAL,
+  yieldTableMainThread,
+} from '../../shared/scheduler'
+import { iterateTableRows } from '../../shared/treeRows'
+import type { TableRow } from '../../shared/types'
+import { encodeTableRowKey, isRowKey } from './rowKey'
+import type {
+  RowKey,
+  TableBuiltInValidationIssue,
+  TableCellValidationOutcome,
+  TableValidationColumn,
+  TableValidationIssue,
+  TableValidationOptions,
+  TableValidationResult,
+} from './types'
+
+export type {
+  TableCellValidator,
+  TableValidationColumn,
+  TableValidationIssue,
+  TableValidationOptions,
+  TableValidationResult,
+  TableValidationRule,
+} from './types'
+
+const issueKey = (rowKey: RowKey, prop: string) =>
+  `${encodeTableRowKey(rowKey)}\u0000${prop}`
+
+interface TableValidationExecutionOptions {
+  /** 只校验这些业务行；用于保存时跳过未变化数据。 */
+  rowKeys?: ReadonlySet<RowKey>
+  /** false 时返回局部结果但不覆盖组件当前展示问题。 */
+  publish?: boolean
+  /** 每处理多少个单元格主动让出主线程。 */
+  yieldInterval?: number
+  /** 覆盖本轮异步业务校验的最大并发数。 */
+  asyncConcurrency?: number
+}
+
+const DEFAULT_VALIDATION_ASYNC_CONCURRENCY = 8
+const MAX_VALIDATION_ASYNC_CONCURRENCY = 64
+
+const normalizePositiveInteger = (
+  value: number | undefined,
+  fallback: number,
+  maximum = Number.MAX_SAFE_INTEGER
+) => {
+  if (!Number.isFinite(value)) return fallback
+  return Math.min(maximum, Math.max(1, Math.floor(value!)))
+}
+
+/** 业务 validator 即使忽略 signal，取消也必须立即释放本轮状态机。 */
+const raceValidationAbort = <T>(promise: Promise<T>, signal: AbortSignal) => {
+  if (signal.aborted) {
+    // validator 可能在返回 Promise 前同步触发 abort；仍需消费其迟到拒绝。
+    void promise.catch(() => {})
+    return Promise.reject<T>(signal.reason)
+  }
+  return new Promise<T>((resolve, reject) => {
+    const abort = () => reject(signal.reason)
+    signal.addEventListener('abort', abort, { once: true })
+    void promise.then(resolve, reject).finally(() => {
+      signal.removeEventListener('abort', abort)
+    })
+  })
+}
+
+const isTableValidationEmptyValue = (value: unknown) =>
+  value === undefined ||
+  value === null ||
+  (typeof value === 'string' && value.trim() === '') ||
+  (Array.isArray(value) && value.length === 0)
+
+const countDecimalPlaces = (value: unknown) => {
+  return (
+    getTableDecimalMetrics(value)?.decimalPlaces ?? Number.POSITIVE_INFINITY
+  )
+}
+
+const countIntegerDigits = (value: unknown) =>
+  getTableDecimalMetrics(value)?.integerDigits ?? Number.POSITIVE_INFINITY
+
+const createBuiltInIssue = (
+  message: string,
+  code: string
+): TableBuiltInValidationIssue => ({
+  message,
+  code,
+})
+
+/** 仅在声明了任一数字规则时才进行 Number 转换。 */
+const requiresNumericValidation = <T extends TableRow>(
+  column: TableValidationColumn<T>
+) =>
+  column.valueType === 'number' ||
+  Boolean(column.integer) ||
+  column.integerDigits !== undefined ||
+  column.decimalPlaces !== undefined ||
+  column.min !== undefined ||
+  column.max !== undefined ||
+  Boolean(column.positive)
+
+const validateTableNumber = <T extends TableRow>(
+  value: unknown,
+  number: number,
+  column: TableValidationColumn<T>,
+  label: string,
+  messages: TableEngineMessages
+): TableBuiltInValidationIssue | undefined => {
+  if (column.integer && !Number.isInteger(number)) {
+    return createBuiltInIssue(messages.fnValidationInteger(label), 'integer')
+  }
+  if (
+    column.integerDigits !== undefined &&
+    countIntegerDigits(value) > column.integerDigits
+  ) {
+    return createBuiltInIssue(
+      messages.fnValidationIntegerDigits(label, column.integerDigits),
+      'integerDigits'
+    )
+  }
+  if (column.positive && number <= 0) {
+    return createBuiltInIssue(messages.fnValidationPositive(label), 'positive')
+  }
+  if (column.min !== undefined && number < column.min) {
+    return createBuiltInIssue(
+      messages.fnValidationMin(label, column.min),
+      'min'
+    )
+  }
+  if (column.max !== undefined && number > column.max) {
+    return createBuiltInIssue(
+      messages.fnValidationMax(label, column.max),
+      'max'
+    )
+  }
+  if (
+    column.decimalPlaces !== undefined &&
+    countDecimalPlaces(value) > column.decimalPlaces
+  ) {
+    return createBuiltInIssue(
+      messages.fnValidationDecimals(label, column.decimalPlaces),
+      'decimalPlaces'
+    )
+  }
+}
+
+export const validateTableValue = <T extends TableRow>(
+  value: unknown,
+  column: TableValidationColumn<T>,
+  messages: TableEngineMessages = TABLE_ENGINE_MESSAGES_ZH_CN
+): TableBuiltInValidationIssue | undefined => {
+  const label = column.label ?? column.prop
+  if (isTableValidationEmptyValue(value)) {
+    return column.required
+      ? createBuiltInIssue(messages.fnValidationRequired(label), 'required')
+      : undefined
+  }
+  if (
+    column.maxLength !== undefined &&
+    String(value).length > column.maxLength
+  ) {
+    return createBuiltInIssue(
+      messages.fnValidationMaxLength(label, column.maxLength),
+      'maxLength'
+    )
+  }
+
+  if (!requiresNumericValidation(column)) return
+  const number = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(number)) {
+    return createBuiltInIssue(messages.fnValidationNumber(label), 'number')
+  }
+  return validateTableNumber(value, number, column, label, messages)
+}
+
+interface NormalizedCustomValidationOutcome {
+  valid: boolean
+  message?: string
+  code?: string
+}
+
+const isNormalizedCustomValidationOutcome = (
+  value: unknown
+): value is NormalizedCustomValidationOutcome =>
+  Boolean(
+    value &&
+    typeof value === 'object' &&
+    'valid' in value &&
+    typeof value.valid === 'boolean'
+  )
+
+const normalizeCustomValidationOutcome = (
+  outcome: TableCellValidationOutcome
+): NormalizedCustomValidationOutcome => {
+  if (outcome == null) return { valid: true }
+  if (typeof outcome === 'string') return { valid: false, message: outcome }
+  if (typeof outcome === 'boolean') return { valid: outcome }
+  return isNormalizedCustomValidationOutcome(outcome)
+    ? outcome
+    : { valid: true }
+}
+
+/**
+ * 保存前校验状态机。
+ *
+ * 内置规则先同步执行，通过后才调用业务 validator。错误按 rowKey + prop 存储，便于
+ * 翻页/重排后仍能准确定位；AbortSignal 用于取消已经过期的整轮异步校验。
+ */
+export class TableValidation<T extends TableRow = TableRow> {
+  private issueMap = new Map<string, TableValidationIssue>()
+  private issueListCache: readonly TableValidationIssue[] | null = null
+
+  constructor(private readonly options: TableValidationOptions<T>) {}
+
+  /** 返回 Controller 装配时验证过的统一行身份解析器。 */
+  get rowKeyResolver() {
+    return this.options.columns.length ? this.options.rowKey : null
+  }
+
+  get issues(): readonly TableValidationIssue[] {
+    this.issueListCache ??= Object.freeze([...this.issueMap.values()])
+    return this.issueListCache
+  }
+
+  getIssue(rowKey: RowKey, prop: string) {
+    return this.issueMap.get(issueKey(rowKey, prop))
+  }
+
+  publish(result: TableValidationResult) {
+    const issues = Object.freeze([...result.issues])
+    this.issueMap = new Map(
+      issues.map((issue) => [issueKey(issue.rowKey, issue.prop), issue])
+    )
+    this.issueListCache = issues
+  }
+
+  getRowKey(row: T): RowKey {
+    const value =
+      typeof this.options.rowKey === 'function'
+        ? this.options.rowKey(row)
+        : getTableRowValue(row, this.options.rowKey)
+    if (!isRowKey(value)) {
+      throw new Error('[TableComponent] Every validated row requires a rowKey.')
+    }
+    return value
+  }
+
+  reset() {
+    if (!this.issueMap.size) return
+    this.issueMap.clear()
+    this.issueListCache = null
+  }
+
+  clearCell(rowKey: RowKey, prop: string) {
+    if (this.issueMap.delete(issueKey(rowKey, prop))) {
+      this.issueListCache = null
+    }
+  }
+
+  removeRow(rowKey: RowKey) {
+    let changed = false
+    for (const [key, issue] of this.issueMap) {
+      if (issue.rowKey !== rowKey) continue
+      this.issueMap.delete(key)
+      changed = true
+    }
+    if (changed) this.issueListCache = null
+  }
+
+  remapKey(previousKey: RowKey, nextKey: RowKey) {
+    let changed = false
+    for (const [key, issue] of [...this.issueMap]) {
+      if (issue.rowKey !== previousKey) continue
+      this.issueMap.delete(key)
+      const nextIssue = { ...issue, rowKey: nextKey }
+      this.issueMap.set(issueKey(nextKey, issue.prop), nextIssue)
+      changed = true
+    }
+    if (changed) this.issueListCache = null
+  }
+
+  private validateBuiltIn(
+    column: TableValidationColumn<T>,
+    value: unknown
+  ): TableBuiltInValidationIssue | undefined {
+    return validateTableValue(
+      value,
+      column,
+      this.options.messages ?? TABLE_ENGINE_MESSAGES_ZH_CN
+    )
+  }
+
+  private validateCell(
+    row: T,
+    rowIndex: number,
+    rowKey: RowKey,
+    column: TableValidationColumn<T>,
+    signal: AbortSignal
+  ):
+    | TableValidationIssue
+    | undefined
+    | Promise<TableValidationIssue | undefined> {
+    if (signal.aborted) throw signal.reason
+    const value = getTableRowValue(row, column.prop)
+    // 内置规则失败后不再调用业务 validator，保证业务层只接收结构有效的值。
+    const builtIn = this.validateBuiltIn(column, value)
+    if (builtIn) return { rowKey, prop: column.prop, value, ...builtIn }
+    // 非必填空值由 required 规则决定；可选字段不触发业务异步校验。
+    if (!column.validator || isTableValidationEmptyValue(value)) return
+
+    return (async () => {
+      try {
+        const outcome = await column.validator!(value, {
+          row,
+          rowKey,
+          rowIndex,
+          prop: column.prop,
+          value,
+          signal,
+        })
+        if (signal.aborted) throw signal.reason
+        if (outcome == null || outcome === true) return
+        const normalized = normalizeCustomValidationOutcome(outcome)
+        if (normalized.valid) return
+        return {
+          rowKey,
+          prop: column.prop,
+          value,
+          message:
+            normalized.message ??
+            (
+              this.options.messages ?? TABLE_ENGINE_MESSAGES_ZH_CN
+            ).fnValidationFailed(column.label ?? column.prop),
+          code: normalized.code ?? 'custom',
+        }
+      } catch (error) {
+        // 主动取消属于控制流，不应转换成可展示的 validatorError。
+        if (signal.aborted) throw signal.reason ?? error
+        return {
+          rowKey,
+          prop: column.prop,
+          value,
+          message: error instanceof Error ? error.message : String(error),
+          code: 'validatorError',
+        }
+      }
+    })()
+  }
+
+  async validate(
+    rows: readonly T[],
+    signal: AbortSignal,
+    options: TableValidationExecutionOptions = {}
+  ): Promise<TableValidationResult> {
+    const targetKeys = options.rowKeys
+      ? new Set([...options.rowKeys].map(encodeTableRowKey))
+      : undefined
+    const asyncConcurrency = normalizePositiveInteger(
+      options.asyncConcurrency ?? this.options.asyncConcurrency,
+      DEFAULT_VALIDATION_ASYNC_CONCURRENCY,
+      MAX_VALIDATION_ASYNC_CONCURRENCY
+    )
+    const yieldInterval = normalizePositiveInteger(
+      options.yieldInterval,
+      TABLE_TASK_YIELD_INTERVAL
+    )
+    const orderedIssues: Array<{
+      order: number
+      issue: TableValidationIssue
+    }> = []
+    const pending = new Set<Promise<void>>()
+    let processedCells = 0
+    let cellOrder = 0
+    const waitForPending = async (all = false) => {
+      if (!pending.size) return
+      try {
+        if (all) await Promise.all(pending)
+        else await Promise.race(pending)
+      } catch (error) {
+        await Promise.allSettled(pending)
+        throw error
+      }
+    }
+    const throwIfAborted = async () => {
+      if (!signal.aborted) return
+      await Promise.allSettled(pending)
+      throw signal.reason
+    }
+
+    for (const { row, flatIndex: rowIndex } of iterateTableRows(rows)) {
+      const rowKey = this.getRowKey(row)
+      if (targetKeys && !targetKeys.has(encodeTableRowKey(rowKey))) continue
+      for (const column of this.options.columns) {
+        const order = cellOrder++
+        const outcome = this.validateCell(row, rowIndex, rowKey, column, signal)
+        if (outcome instanceof Promise) {
+          const task = raceValidationAbort(outcome, signal).then((issue) => {
+            if (signal.aborted) throw signal.reason
+            if (issue) orderedIssues.push({ order, issue })
+          })
+          pending.add(task)
+          void task.then(
+            () => pending.delete(task),
+            () => pending.delete(task)
+          )
+          if (pending.size >= asyncConcurrency) await waitForPending()
+        } else if (outcome) {
+          orderedIssues.push({ order, issue: outcome })
+        }
+        if (signal.aborted) await throwIfAborted()
+        processedCells += 1
+        if (processedCells % yieldInterval === 0) {
+          await yieldTableMainThread()
+          if (signal.aborted) await throwIfAborted()
+        }
+      }
+    }
+    await waitForPending(true)
+    if (signal.aborted) await throwIfAborted()
+    orderedIssues.sort((left, right) => left.order - right.order)
+    // 每轮只写局部结果；被取消的旧轮次永远不能污染最新展示状态。
+    const nextIssueMap = new Map(
+      orderedIssues.map(({ issue }) => [
+        issueKey(issue.rowKey, issue.prop),
+        issue,
+      ])
+    )
+    const issues = Object.freeze([...nextIssueMap.values()])
+    const result = {
+      valid: issues.length === 0,
+      issues,
+      firstIssue: issues[0],
+    }
+    if (options.publish !== false) {
+      this.issueMap = nextIssueMap
+      this.issueListCache = issues
+    }
+    return result
+  }
+}
+
+export const createTableValidation = <T extends TableRow>(
+  options: TableValidationOptions<T>
+) => new TableValidation(options)

package/template/src/components/AppTable/engine/table/grid/cellMeta.ts

@@ -0,0 +1,90 @@
+import type { CellMeta } from 'handsontable'
+import type { BaseRenderer } from 'handsontable/renderers'
+import type { TableColumn } from '../../columns/column'
+import type { TableRow } from '../../shared/types'
+
+interface ResolvedTableCellMeta {
+  readOnly?: boolean
+  renderer?: BaseRenderer
+  className?: string | string[]
+}
+
+interface ResolveTableCellMetaOptions<T extends TableRow> {
+  inherited?: CellMeta
+  resolved?: ResolvedTableCellMeta
+  row: T
+  column: TableColumn<T>
+  physicalRow: number
+  visualRow?: number
+  striped?: boolean
+  cellState?: { error?: unknown; conflict: boolean }
+}
+
+/** 合并继承样式、调用方样式以及表格内部状态样式。 */
+const resolveTableCellClassName = (options: {
+  inherited?: string | string[]
+  resolved?: string | string[]
+  striped: boolean
+  visualRow: number
+  error?: unknown
+  conflict: boolean
+}) =>
+  [
+    options.inherited,
+    options.resolved,
+    options.striped && options.visualRow % 2 === 1
+      ? 'table-component__striped-row'
+      : '',
+    options.error ? 'htInvalid table-component__cell-error' : '',
+    options.conflict ? 'table-component__cell-conflict' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+/** 调用方动态解析结果优先，其次才执行列级 readOnly 声明。 */
+const resolveTableCellReadOnly = <T extends TableRow>(
+  row: T,
+  physicalRow: number,
+  column: TableColumn<T>,
+  resolved?: boolean
+) => {
+  if (resolved !== undefined) return resolved
+  return typeof column.readOnly === 'function'
+    ? column.readOnly(row, physicalRow)
+    : (column.readOnly ?? true)
+}
+
+/** 合并调用方单元格元数据、事务状态和校验状态。 */
+export const resolveTableCellMeta = <T extends TableRow>({
+  inherited,
+  resolved,
+  row,
+  column,
+  physicalRow,
+  visualRow = physicalRow,
+  striped = false,
+  cellState,
+}: ResolveTableCellMetaOptions<T>): CellMeta => {
+  const tableError = cellState?.error
+  const hasVersionConflict = cellState?.conflict ?? false
+  const resolvedRenderer = resolved?.renderer ?? inherited?.renderer
+  return {
+    ...(inherited ?? {}),
+    className: resolveTableCellClassName({
+      inherited: inherited?.className,
+      resolved: resolved?.className,
+      striped,
+      visualRow,
+      error: tableError,
+      conflict: hasVersionConflict,
+    }),
+    tableError,
+    ...(resolvedRenderer ? { renderer: resolvedRenderer } : {}),
+    readOnly: resolveTableCellReadOnly(
+      row,
+      physicalRow,
+      column,
+      resolved?.readOnly
+    ),
+  }
+}

package/template/src/components/AppTable/engine/table/grid/handsontable.ts

@@ -0,0 +1,25 @@
+/** 网格运行时中 Handsontable 的注册与创建边界。 */
+import type { GridSettings } from 'handsontable'
+import Handsontable from 'handsontable/base'
+import type {} from './handsontableExtensions'
+import { registerTableModules } from './moduleRegistry'
+import type { TableRuntimeOptions } from './runtime'
+
+export const createHandsontable = (
+  container: HTMLElement,
+  settings: GridSettings,
+  runtime?: TableRuntimeOptions
+) => {
+  registerTableModules(runtime)
+  // v18 在未显式指定 theme 时会在 Core 构造和 init 各创建一个 ThemeManager，
+  // 前一个 manager 被覆盖后无法 destroy，其 ThemeBuilder 订阅会保留整个旧实例。
+  // 内置 CSS 已全局引入，显式使用字符串主题可绕开重复 manager，同时保留
+  // 消费者显式传入 ThemeBuilder/其他主题的能力。
+  const resolvedSettings =
+    settings.theme === undefined && settings.themeName === undefined
+      ? { ...settings, theme: 'ht-theme-main' }
+      : settings
+  return new Handsontable(container, resolvedSettings)
+}
+
+export type { GridSettings } from 'handsontable'

package/template/src/components/AppTable/engine/table/grid/handsontableExtensions.d.ts

@@ -0,0 +1,26 @@
+import type { NotificationConfig } from 'handsontable/plugins/notification'
+import type { BaseTheme, ThemeBuilder } from 'handsontable/themes'
+
+/**
+ * Handsontable v18 运行时已支持这些配置，但当前发布包的 GridSettings/CellMeta
+ * 声明尚未完整暴露。集中补充官方声明，避免业务代码通过本地交叉类型和类型断言绕过。
+ */
+declare module 'handsontable/core/settings' {
+  interface GridSettings {
+    theme?: ThemeBuilder | BaseTheme | string
+    notification?: boolean | NotificationConfig
+    maxSelections?: number
+    searchInput?: boolean
+    enterCommits?: boolean
+    sourceSortFunction?: (entries: unknown[]) => unknown[]
+  }
+}
+
+declare module 'handsontable/settings' {
+  interface CellMeta {
+    /** TableComponent 写入的单元格错误，用于渲染原生 title 提示。 */
+    tableError?: unknown
+  }
+}
+
+export {}

package/template/src/components/AppTable/engine/table/grid/index.ts

@@ -0,0 +1,5 @@
+export * from './cellMeta'
+export * from './handsontable'
+export * from './moduleRegistry'
+export * from './runtime'
+export type * from './types'

package/template/src/components/AppTable/engine/table/grid/moduleRegistry.ts

@@ -0,0 +1,39 @@
+import { registerLanguageDictionary } from 'handsontable/i18n'
+import { zhCN } from 'handsontable/i18n/languages'
+import { registerAllModules } from 'handsontable/registry'
+import { resolveTableRuntimeOptions, type TableRuntimeOptions } from './runtime'
+
+let languageRegistered = false
+let fullRuntimeRegistered = false
+const registeredExtensionIds = new Set<string>()
+
+const registerLanguage = () => {
+  if (languageRegistered) return
+  registerLanguageDictionary(zhCN)
+  languageRegistered = true
+}
+
+const registerFullRuntime = () => {
+  if (fullRuntimeRegistered) return
+  // 使用官方聚合入口承接未来版本新增模块，避免维护一份易过期的本地镜像清单。
+  registerAllModules()
+  fullRuntimeRegistered = true
+}
+
+/**
+ * 注册当前表格实例依赖的 Handsontable 模块。
+ *
+ * Handsontable registry 是进程级单例，因此本函数必须幂等；自定义模块也按稳定 id
+ * 去重，同页创建多张表时不会重复注册。
+ */
+export const registerTableModules = (options: TableRuntimeOptions = {}) => {
+  const resolved = resolveTableRuntimeOptions(options)
+  registerLanguage()
+  registerFullRuntime()
+
+  for (const module of resolved.modules) {
+    if (registeredExtensionIds.has(module.id)) continue
+    module.register()
+    registeredExtensionIds.add(module.id)
+  }
+}

package/template/src/components/AppTable/engine/table/grid/runtime.ts

@@ -0,0 +1,31 @@
+/** 业务扩展模块通过稳定 id 保证全局只注册一次。 */
+export interface TableRuntimeModule {
+  /** 自定义模块的全局稳定标识，用于避免重复注册。 */
+  id: string
+  /** 执行 Handsontable 插件、编辑器、渲染器或校验器注册的函数。 */
+  register: () => void
+}
+
+/**
+ * 纯 JS 运行时配置。
+ *
+ * 官方模块始终通过 `registerAllModules()` 注册；升级 Handsontable 后新增的 plugin、
+ * editor、renderer、validator 和 cell type 不需要再修改 TableComponent 注册清单。
+ * `modules` 只承载项目自定义扩展。
+ */
+export interface TableRuntimeOptions {
+  /** 项目自定义扩展模块；官方模块已由 engine 统一注册，不需要重复声明。 */
+  modules?: readonly TableRuntimeModule[]
+}
+
+interface ResolvedTableRuntimeOptions {
+  /** 归一化后的自定义扩展模块数组。 */
+  modules: readonly TableRuntimeModule[]
+}
+
+/** 统一运行时默认值，避免各 React 入口自行猜测注册方式。 */
+export const resolveTableRuntimeOptions = (
+  options: TableRuntimeOptions = {}
+): ResolvedTableRuntimeOptions => ({
+  modules: options.modules ?? [],
+})

package/template/src/components/AppTable/engine/table/grid/types.ts

@@ -0,0 +1,25 @@
+import type { BaseRenderer } from 'handsontable/renderers'
+import type { TableColumn } from '../../columns/column'
+import type { TableRow } from '../../shared/types'
+
+/** 业务侧解析单元格元数据时获得的稳定行列上下文。 */
+export interface TableCellMetaContext<T extends TableRow = TableRow> {
+  /** 当前物理行对应的业务 DTO。 */
+  row: T
+  /** 当前物理行下标。 */
+  rowIndex: number
+  /** 当前业务列定义。 */
+  column: TableColumn<T>
+  /** 当前物理列下标。 */
+  columnIndex: number
+}
+
+/** 业务侧可覆盖的 Handsontable 单元格元数据。 */
+export interface TableCellMetaResult {
+  /** 是否禁止编辑当前单元格。 */
+  readOnly?: boolean
+  /** 当前单元格使用的 Handsontable renderer。 */
+  renderer?: BaseRenderer
+  /** 追加到当前单元格的样式类。 */
+  className?: string | string[]
+}