Skip to content

TypeScript 类型定义

Cell 类型

typescript
export type CellType =
  | 'text' | 'number' | 'currency' | 'enum' | 'boolean'
  | 'datetime' | 'dateRange' | 'image' | 'file' | 'link' | 'detail'

export type DisplayAs =
  | 'text' | 'number' | 'currency' | 'tag' | 'status' | 'date'
  | 'image' | 'file' | 'link' | 'copy' | 'progress' | 'detail'

export type EditAs =
  | 'input' | 'textarea' | 'inputNumber' | 'select' | 'radio' | 'checkbox'
  | 'datePicker' | 'dateRangePicker' | 'switch' | 'imageUpload' | 'fileUpload'

export interface CellDeclaration {
  key: string
  label: string
  cell: CellType
  cellProps?: Record<string, any>
  displayAs?: DisplayAs
  editAs?: EditAs
  permission?: string | { view?: string | boolean; edit?: string | boolean }
  column?: ColumnConfig
}

Column 配置

typescript
export interface ColumnConfig {
  width?: number
  minWidth?: number
  fixed?: 'left' | 'right'
  align?: 'left' | 'center' | 'right'
  sortable?: boolean
  resizable?: boolean
  showOverflowTooltip?: boolean
}

cellProps 类型

typescript
export interface TextCellProps {
  maxlength?: number
  placeholder?: string
  showOverflowTooltip?: boolean
}

export interface NumberCellProps {
  precision?: number
  thousandSep?: boolean
  min?: number
  max?: number
  step?: number
}

export interface CurrencyCellProps {
  precision?: number
  prefix?: string
  min?: number
  max?: number
}

export interface EnumCellProps {
  options?: string
  colors?: Record<string, string>
  labelKey?: string
  valueKey?: string
  displayLabelKey?: string
}

export interface BooleanCellProps {
  activeText?: string
  inactiveText?: string
  activeColor?: string
}

export interface DatetimeCellProps {
  format?: string
  valueFormat?: string
  pickerType?: 'date' | 'datetime' | 'month' | 'year'
}

export interface DateRangeCellProps {
  format?: string
  valueFormat?: string
  startKey?: string
  endKey?: string
}

export interface ImageCellProps {
  multiple?: boolean
  limit?: number
  width?: number
  height?: number
  preview?: boolean
  accept?: string
  maxSize?: number
  uploadFn?: string
}

export interface FileCellProps {
  multiple?: boolean
  limit?: number
  accept?: string
  maxSize?: number
  uploadFn?: string
}

export interface LinkCellProps {
  target?: string
  href?: string
}

export interface DetailCellProps {
  trigger?: 'button' | 'link'
  buttonText?: string
  mode?: 'text' | 'highlight'
  highlightKey?: string
  dialogTitle?: string
  dialogWidth?: string
}

Schema 顶层

typescript
export interface SchemlySchema {
  version: string
  id: string
  name: string
  type: 'DataTable' | 'Form' | 'Descriptions'
  permission?: string
  dicts?: Record<string, DictItem[]>
  externalDeps?: ExternalDeps
  props: DataTableProps | FormProps | DescriptionsProps
}

export interface DictItem {
  label: string
  value: string | number
  color?: string
}

ExternalDeps

typescript
export interface ExternalDeps {
  dicts?: string[]
  functions?: FunctionDep[]
  permissions?: PermissionDep[]
}

export interface FunctionDep {
  key: string
  type: 'api' | 'remote' | 'upload:image' | 'upload:file' | 'validator'
  description: string
}

export interface PermissionDep {
  code: string
  name: string
  scope: 'type' | 'cell:view' | 'cell:edit' | 'action'
  target: string
}

DataTable Props

typescript
export interface DataTableProps {
  columns: CellDeclaration[]
  pagination?: boolean | PaginationConfig
  selection?: SelectionConfig
  toolbarActions?: ToolbarAction[]
  rowActions?: RowAction[]
  rowActionStyle?: RowActionStyle
  createForm?: FormDialogConfig
  updateForm?: FormDialogConfig
}

export interface PaginationConfig {
  enabled?: boolean
  pageSize?: number
  pageSizes?: number[]
  layout?: string
}

export interface SelectionConfig {
  enabled?: boolean
  rowKey?: string
  selectable?: boolean | string
}

export interface ToolbarAction {
  key: string
  label: string
  permission?: string
  trigger?: string
  batch?: boolean
  confirm?: string
  icon?: string
}

export interface RowAction {
  key: string
  label: string
  permission?: string
  trigger?: string
  confirm?: string
  danger?: boolean
  icon?: string
}

export interface RowActionStyle {
  type?: 'link' | 'button'
  maxVisible?: number
  moreText?: string
}

export interface FormDialogConfig {
  title: string
  width?: string
  closeConfirm?: boolean
  keepAfterSubmit?: boolean
  layout?: FormLayout
  fields: string[]
  overrides?: Record<string, FieldOverride>
  rules?: Record<string, RuleItem[]>
}

export interface FormLayout {
  columns?: number
  labelWidth?: string
  labelPosition?: 'left' | 'right' | 'top'
}

export interface FieldOverride {
  disabled?: boolean
  visible?: boolean
  cell?: CellType
  cellProps?: Record<string, any>
  editAs?: EditAs
  permission?: string | { view?: string | boolean; edit?: string | boolean }
  defaultValue?: any
  span?: number
}

export interface RuleItem {
  required?: boolean
  pattern?: string
  min?: number
  max?: number
  type?: string
  validator?: string
  message?: string
  trigger?: 'blur' | 'change'
}

Form Props

typescript
export interface FormProps {
  layout?: FormLayout & {
    collapsible?: boolean
    defaultCollapsed?: boolean
    visibleRows?: number
  }
  fields: FormFieldDeclaration[]
  buttons?: FormButtons
}

export interface FormFieldDeclaration extends CellDeclaration {
  rules?: RuleItem[]
  defaultValue?: any
  visible?: boolean
  disabled?: boolean
  span?: number
}

export interface FormButtons {
  submitText?: string
  resetText?: string
  showReset?: boolean
}

Descriptions Props

typescript
export interface DescriptionsProps {
  column?: number
  items: CellDeclaration[]
}

Providers

typescript
export interface Providers {
  dicts?: Record<string, DictItem[]>
  functions?: Record<string, Function>
  auth?: { hasPermission: (code: string) => boolean }
  actionControl?: (row: any) => Record<string, true | false | 'disabled'>
  toolbarControl?: () => Record<string, true | false | 'disabled'>
  formatters?: Record<string, (value: any) => string>
}

Released under the MIT License.