UI Design System
build dev

FieldCondition

以字段+操作符+值行式编辑 AND/OR 条件组。中文惯用名:字段条件(条件树与表达式字符串互转)。
稳定本期新增已接入

元信息

字段值
规范 IDcomponent.field-condition
名称FieldCondition
二级分类业务组件(business)
用途以字段+操作符+值行式编辑 AND/OR 条件组
描述中文惯用名:字段条件(条件树与表达式字符串互转)。

预览

静态结构:根节点为条件组容器——组内 >1 条时顶部展示「且 / 或」relation 切换按钮(AND=蓝 / OR=橙);每条条件一行:字段(SearchableSelect 选候选字段)→ 操作符(Select,13 个操作符按 fieldType 白名单过滤)→ 值输入(NUMBER→数字、DATE→日期、BETWEEN→双输入 ~ 分隔、无值操作符 HASVAL / NOHASVAL / TRUE / FALSE 隐藏值输入);行尾删除按钮(组内仅 1 条时隐藏),底部「添加条件」按钮(disabled 时隐藏)。当前实现单层结构:只渲染第一个分组,根 relation 仅用于组间连接;字段变更重置操作符与值,操作符变更在值语义变化时重置 value;statementToCondition 仅支持单层解析(顶层 || 组成单个 OR 组,否则 && 组成 AND 组,支持生成器外层括号与简单 AI 格式),无法解析返回 null。

DSL 结构

DslNode
{
  "type": "FieldCondition",
  "props": {
    "value": "${state.condition}",
    "fields": [
      {
        "featureCode": "age",
        "featureName": "年龄",
        "fieldType": "NUMBER"
      },
      {
        "featureCode": "name",
        "featureName": "姓名",
        "fieldType": "STRING"
      },
      {
        "featureCode": "registerTime",
        "featureName": "注册时间",
        "fieldType": "DATE"
      }
    ]
  },
  "events": {
    "onChange": {
      "action": "setState",
      "params": {
        "condition": "${event}"
      }
    }
  }
}

何时用

何时使用

  • 以「字段 + 操作符 + 值」行式 UI 可视化编辑 AND/OR 条件组。
  • 作为其他业务组件的内嵌控件(ExpressionEditor 的 fieldCondition 类型控件)。
  • 需要条件树与表达式字符串互转(conditionToStatement / statementToCondition)。

何时不用

  • 带权重 / 评分的评分规则条件(每条条件附 score):使用 RuleConfig。
  • 含函数调用、运算符混排的自由表达式:使用 ExpressionEditor 或 RuleExpression。

变体

变体视觉形态适用场景
操作符按字段类型过滤13 个操作符,按 fieldType 白名单收敛BOOLEAN 只出 TRUE / FALSE,NUMBER / DATE 才出 BETWEEN,IN / NOT_IN 限 NUMBER / STRING
BETWEEN 范围输入双值输入,~ 分隔数值 / 日期区间条件
无值操作符HASVAL / NOHASVAL / TRUE / FALSE 隐藏值输入只看有无值的存在性条件
relation 切换AND=蓝 / OR=橙「且 / 或」组内 >1 条时切换连接方式

API 属性

属性类型默认值说明
valueFieldConditionValuedefaultFieldConditionValue()受控条件树:{ relation, children: 分组[] },每条 { field, term, value? }
onChange(value: FieldConditionValue) => void—条件树变更回调
fieldsConditionFieldOption[][]候选字段(datasource.json 结构:featureCode / featureName / fieldType / recommended)
disabledbooleanfalse禁用:隐藏添加 / 删除入口,控件全部禁用

使用规范

  • fields 来自 datasource.json 结构,featureCode 唯一;fieldType(DATE / STRING / NUMBER / BOOLEAN)决定操作符白名单,必须准确。
  • 条件树 ↔ 语句串互转只支持单层结构:多组嵌套条件暂无法表示,设计时避免深嵌套。
  • 表达式回填走 statementToCondition,解析失败返回 null——外部赋值格式要符合「组内 && 、组间 ||」约定。

正例

  • ✓ 筛选器:fields 传数据集字段,用户搭「age > 18 且 status = ACTIVE」。
  • ✓ ExpressionEditor 的条件参数位:fieldCondition 控件输出语句串拼入表达式模板。

反例

  • ✕ 用 FieldCondition 做带评分的规则条件(应使用 RuleConfig)。
  • ✕ 依赖多层嵌套条件组(statementToCondition 无法表示,会被解析失败)。

Design Token 映射

不适用:组件 tokenRefs 为空:样式 Token 数据尚未接入,三层映射(Primitive → Semantic → Component)待样式 Token 接入后回填。