• 简体中文

      • TypedVariableInput

      TypedVariableInput 用于字段同时接受常量和变量的场景。比如 SMTP 端口可以直接写 465，也可以写 {{ $env.SMTP_PORT }}。

      如果字段只接受字面值，直接用 Antd InputNumber、Select 或 DatePicker。如果字段只接受变量，默认用 EnvVariableInput 或 VariableInput。

      基本用法

      import React from 'react';
import { Application, Plugin, TypedVariableInput } from '@nocobase/client-v2';
import { Form } from 'antd';

function DemoPage() {
  return (
    <Form
      layout="vertical"
      style={{ maxWidth: 420 }}
      initialValues={{ port: 465, secure: true }}
    >
      <Form.Item name="port" label="Port">
        <TypedVariableInput
          types={[['number', { min: 1, max: 65535, step: 1 }]]}
          namespaces={['$env']}
        />
      </Form.Item>
      <Form.Item name="secure" label="Secure">
        <TypedVariableInput types={['boolean']} namespaces={['$env']} />
      </Form.Item>
    </Form>
  );
}

class DemoPlugin extends Plugin {
  async load() {
    this.flowEngine.context.defineProperty('$env', {
      value: { SMTP_PORT: '465', SMTP_SECURE: 'true' },
      meta: {
        title: 'Environment variables',
        type: 'object',
        properties: {
          SMTP_PORT: { title: 'SMTP_PORT', type: 'string' },
          SMTP_SECURE: { title: 'SMTP_SECURE', type: 'string' },
        },
      },
    });

    this.router.add('root', {
      path: '/',
      element: <DemoPage />,
    });
  }
}

const app = new Application({
  router: { type: 'memory', initialEntries: ['/'] },
  plugins: [DemoPlugin],
});

export default app.getRootComponent();

      import { TypedVariableInput } from '@nocobase/client-v2';

<Form.Item name={['options', 'port']} label={t('Port')} initialValue={465}>
  <TypedVariableInput
    types={[['number', { min: 1, max: 65535, step: 1 }]]}
    namespaces={['$env']}
  />
</Form.Item>;

      API

      参数类型默认值说明
      valueunknown-当前值
      onChange(next: unknown) => void-值变化回调
      typesTypedConstantSpec[]['string', 'number', 'boolean', 'date']允许的常量类型
      namespacesstring[]-限定可选变量命名空间
      extraNodesMetaTreeNode[]-追加局部变量节点
      nullablebooleantrue是否允许选择空值
      delimiters[string, string]['{{', '}}']变量分隔符
      disabledbooleanfalse是否禁用
      placeholderstring-占位文字
      styleReact.CSSProperties-自定义样式
      classNamestring-自定义 class

      types 可以传裸类型，也可以传 [type, editorProps] 元组：

      <TypedVariableInput
  types={[
    ['number', { min: 1, max: 65535 }],
    'boolean',
  ]}
/>;

      值的形态

      模式保存值
      字符串常量string
      数字常量number
      布尔常量boolean
      日期常量Date
      变量形如 {{ $env.SMTP_PORT }} 的字符串
      空值null
      提示

      即使 types 只允许一种类型，组件也会保留「常量」二级菜单。这是为了让用户能明确看到当前选择的是常量类型，而不是普通输入框。