• Español

      • UI Schema

      UI Schema es el protocolo que NocoBase utiliza para describir componentes de front-end. Está basado en Formily Schema 2.0 y sigue un estilo similar a JSON Schema. En FlowEngine, el campo uiSchema de registerFlow utiliza esta sintaxis para definir la UI del panel de configuración.

      interface ISchema {
  type: 'void' | 'string' | 'number' | 'object' | 'array';
  name?: string;
  title?: any;
  // 包装器组件
  ['x-decorator']?: string;
  // 包装器组件属性
  ['x-decorator-props']?: any;
  // 组件
  ['x-component']?: string;
  // 组件属性
  ['x-component-props']?: any;
  // 展示状态，默认为 'visible'
  ['x-display']?: 'none' | 'hidden' | 'visible';
  // 组件的子节点
  ['x-content']?: any;
  // children 节点 schema
  properties?: Record<string, ISchema>;

  // 以下仅字段组件时使用

  // 字段联动
  ['x-reactions']?: SchemaReactions;
  // 字段 UI 交互模式，默认为 'editable'
  ['x-pattern']?: 'editable' | 'disabled' | 'readPretty';
  // 字段校验
  ['x-validator']?: Validator;
  // 默认数据
  default?: any;
}

      Uso básico

      El componente más simple

      Todas las etiquetas HTML nativas se pueden expresar como schema:

      {
  type: 'void',
  'x-component': 'h1',
  'x-content': 'Hello, world!',
}

      Equivalente en JSX:

      <h1>Hello, world!</h1>

      Componentes hijos

      Los componentes hijos se escriben dentro de properties:

      {
  type: 'void',
  'x-component': 'div',
  'x-component-props': { className: 'form-item' },
  properties: {
    title: {
      type: 'string',
      'x-component': 'input',
    },
  },
}

      Equivalente en JSX:

      <div className={'form-item'}>
  <input name={'title'} />
</div>

      Descripción de las propiedades

      type

      Tipo del nodo:

      type SchemaTypes = 'string' | 'object' | 'array' | 'number' | 'boolean' | 'void';

      name

      Nombre del schema. El nombre de un nodo hijo es la clave dentro de properties:

      {
  name: 'root',
  properties: {
    child1: {
      // 这里不需要再写 name
    },
  },
}

      title

      Título del nodo; se utiliza habitualmente como etiqueta de los campos de un formulario.

      x-component

      Nombre del componente. Puede ser una etiqueta HTML nativa o un componente React registrado:

      {
  type: 'void',
  'x-component': 'h1',
  'x-content': 'Hello, world!',
}

      x-component-props

      Propiedades del componente:

      {
  type: 'void',
  'x-component': 'Table',
  'x-component-props': {
    loading: true,
  },
}

      x-decorator

      Componente envoltorio. La combinación x-decorator + x-component permite tener dos componentes en un mismo nodo del schema, lo que reduce la complejidad estructural y aumenta la reutilización.

      Por ejemplo, en un formulario, FormItem actúa como decorator:

      {
  type: 'void',
  'x-component': 'div',
  properties: {
    title: {
      type: 'string',
      'x-decorator': 'FormItem',
      'x-component': 'Input',
    },
    content: {
      type: 'string',
      'x-decorator': 'FormItem',
      'x-component': 'Input.TextArea',
    },
  },
}

      Equivalente en JSX:

      <div>
  <FormItem>
    <Input name={'title'} />
  </FormItem>
  <FormItem>
    <Input.TextArea name={'content'} />
  </FormItem>
</div>

      x-display

      Estado de visualización del componente:

      ValorDescripción
      'visible'Mostrar el componente (valor por defecto)
      'hidden'Ocultar el componente, pero los datos no se ocultan
      'none'Ocultar el componente y también los datos

      x-pattern

      Modo de interacción del componente de campo:

      ValorDescripción
      'editable'Editable (valor por defecto)
      'disabled'No editable
      'readPretty'Modo de lectura amigable: por ejemplo, un componente de texto de una línea es <input /> en modo de edición y <div /> en modo de lectura amigable

      Uso en registerFlow

      Durante el desarrollo de plugins, uiSchema se utiliza principalmente en el panel de configuración de registerFlow. Cada campo suele envolverse con 'x-decorator': 'FormItem':

      MyModel.registerFlow({
  key: 'flow1',
  on: 'beforeRender',
  steps: {
    editTitle: {
      title: '编辑标题',
      uiSchema: {
        title: {
          type: 'string',
          title: '标题',
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
        showBorder: {
          type: 'boolean',
          title: '显示边框',
          'x-decorator': 'FormItem',
          'x-component': 'Switch',
        },
        color: {
          type: 'string',
          title: '颜色',
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          enum: [
            { label: '红色', value: 'red' },
            { label: '蓝色', value: 'blue' },
            { label: '绿色', value: 'green' },
          ],
        },
      },
      handler(ctx, params) {
        ctx.model.props.title = params.title;
        ctx.model.props.showBorder = params.showBorder;
        ctx.model.props.color = params.color;
      },
    },
  },
});
      Sugerencia

      La v2 mantiene la compatibilidad con la sintaxis de uiSchema, aunque sus casos de uso son limitados: se utiliza principalmente para describir la UI del formulario en el panel de configuración de Flow. Para la mayoría del renderizado de componentes en tiempo de ejecución, se recomienda emplear directamente los componentes de Antd.

      Referencia rápida de componentes habituales

      Componentex-componenttypeDescripción
      Texto de una líneaInputstringEntrada de texto básica
      Texto multilíneaInput.TextAreastringÁrea de texto multilínea
      NúmeroInputNumbernumberEntrada numérica
      InterruptorSwitchbooleanConmutador booleano
      Selector desplegableSelectstringRequiere enum para proveer las opciones
      Selección únicaRadio.GroupstringRequiere enum para proveer las opciones
      Selección múltipleCheckbox.GroupstringRequiere enum para proveer las opciones
      FechaDatePickerstringSelector de fecha

      Enlaces relacionados