工具函数

@uozi/vito-core 的工具函数用于类型推导和字段/列的常用转换。

defineFields

保留字面量类型，减少泛型显式声明。

function defineFields<Row, FormModel, const Fields extends CrudField<Row, FormModel>[]>(
  fields: Fields
): Fields

用法：

import { defineFields } from '@uozi/vito-core'

const fields = defineFields<MyRow>([
  { key: 'name', label: '名称', type: 'text', visibleIn: { searchForm: true, editForm: true } },
  { key: 'status', label: '状态', type: 'select', visibleIn: { searchForm: true, editForm: true } },
])
// fields 保留字面量类型，IDE 能推导出 key 的具体值

TIP

在 @uozi/vito-naive-ui 中也有同名的 defineFields，它的 UiExt 默认绑定为 NaiveFieldUi，使用 Naive UI 时推荐用 naive-ui 版本。

defineColumns

保留字面量类型。

function defineColumns<Row, const Columns extends CrudColumn<Row>[]>(
  columns: Columns
): Columns

createColumnsFromFields

从字段定义自动生成表格列。只包含 visibleIn.table !== false 的字段。

function createColumnsFromFields<Row>(
  fields: CrudField<Row>[],
  options?: { includeKeys?: string[] }
): CrudColumn<Row>[]

参数	类型	说明
fields	CrudField<Row>[]	字段定义数组
options.includeKeys	string[]	只包含指定 key 的列

filterFieldsBySurface

按 visibleIn 规则过滤字段。

function filterFieldsBySurface<Row>(
  fields: CrudField<Row>[],
  surface: 'searchForm' | 'table' | 'editForm' | 'detail',
  ctx?: Partial<FieldContext<Row>>
): CrudField<Row>[]

参数	类型	说明
fields	CrudField<Row>[]	字段定义数组
surface	string	目标 surface
ctx	Partial<FieldContext>	传给 visibleIn 函数的上下文

getFieldLabel

提取字段的 label 字符串（处理 label 是函数的情况）。

function getFieldLabel(field: CrudField): string

示例

fields & columns

import type { SelectOption } from 'naive-ui'
import type { DemoRow } from './basic-types'
import { cellDateTime, cellEnumTag, cellMoney, defineColumns, defineFields } from '@uozi/vito-naive-ui'

const statusOptions: SelectOption[] = [
  { label: '草稿', value: 'draft' },
  { label: '启用', value: 'enabled' },
  { label: '禁用', value: 'disabled' },
]

export const demoFields = defineFields<DemoRow>([
  {
    key: 'name',
    label: '名称',
    type: 'text',
    required: true,
    visibleIn: { searchForm: true, table: true, editForm: true },
    ui: {
      formControl: { placeholder: '输入名称' },
      overrides: {
        editForm: { formControl: { clearable: true } },
        searchForm: { formControl: { clearable: true } },
      },
    },
  },
  {
    key: 'status',
    label: '状态',
    type: 'select',
    required: true,
    visibleIn: { searchForm: true, table: true, editForm: true },
    ui: {
      options: statusOptions,
      formControl: { options: statusOptions, clearable: true },
    },
  },
  {
    key: 'amount',
    label: '金额',
    type: 'money',
    required: true,
    visibleIn: { searchForm: false, table: true, editForm: true },
    ui: {
      formControl: { min: 0, step: 1, placeholder: '输入金额' },
    },
  },
  {
    key: 'createdAt',
    label: '创建时间',
    type: 'datetime',
    visibleIn: { searchForm: false, table: true, editForm: false },
  },
])

export const demoColumns = defineColumns<DemoRow>([
  { key: 'name', label: '名称', sortable: true, width: 220 },
  {
    key: 'status',
    label: '状态',
    width: 120,
    render: cellEnumTag({
      options: statusOptions,
      typeMap: { draft: 'warning', enabled: 'success', disabled: 'error' },
    }),
  },
  {
    key: 'amount',
    label: '金额',
    width: 140,
    render: cellMoney({ currency: 'CNY' }),
  },
  {
    key: 'createdAt',
    label: '创建时间',
    width: 200,
    render: cellDateTime(),
  },
])

类型定义

export interface DemoRow {
  id: number
  name: string
  status: 'draft' | 'enabled' | 'disabled'
  amount: number
  createdAt: number
}

export interface DemoQuery {
  search?: {
    name?: string | null
    status?: DemoRow['status'] | null
  }
}