FxForm 表单

具有数据收集、校验和提交功能的表单容器。配合 FxFormItem 组织字段，内置 async-validator 校验引擎，支持 blur/change 触发、行内/垂直布局、统一 size/disabled 透传、必填星号、校验状态图标。不依赖任何 UI 框架。

基础用法

FxForm 用 :model 绑定数据对象、:rules 绑定校验规则；FxFormItem 用 prop 指向 model 的字段。formRef.validate() 触发全量校验，resetFields() 重置。

<template>
  <FxForm :model="form" label-width="88px" style="max-width: 600px">
    <FxFormItem label="活动名称">
      <FxInput v-model="form.name" placeholder="请输入活动名称" />
    </FxFormItem>
    <FxFormItem label="活动区域">
      <FxSelect v-model="form.region" placeholder="请选择活动区域" clearable>
        <FxOption label="区域一" value="shanghai" />
        <FxOption label="区域二" value="beijing" />
      </FxSelect>
    </FxFormItem>
    <FxFormItem label="活动数量">
      <FxInputNumber v-model="form.count" :min="0" :max="100" />
    </FxFormItem>
    <FxFormItem label="即时配送">
      <FxSwitch v-model="form.delivery" />
    </FxFormItem>
    <FxFormItem label="活动类型">
      <FxCheckboxGroup v-model="form.type">
        <FxCheckbox value="online" name="type">线上活动</FxCheckbox>
        <FxCheckbox value="promotion" name="type">促销活动</FxCheckbox>
        <FxCheckbox value="offline" name="type">线下活动</FxCheckbox>
        <FxCheckbox value="brand" name="type">品牌曝光</FxCheckbox>
      </FxCheckboxGroup>
    </FxFormItem>
    <FxFormItem label="资源">
      <FxRadioGroup v-model="form.resource">
        <FxRadio value="sponsor">赞助</FxRadio>
        <FxRadio value="venue">场地</FxRadio>
      </FxRadioGroup>
    </FxFormItem>
    <FxFormItem label="活动形式">
      <FxInput v-model="form.desc" type="textarea" placeholder="请输入活动形式" />
    </FxFormItem>
    <FxFormItem>
      <FxBtn type="primary" @click="onSubmit">立即创建</FxBtn>
      <FxBtn style="margin-left: 8px">取消</FxBtn>
    </FxFormItem>
  </FxForm>
</template>

<script setup lang="ts">
import { reactive } from "vue"
import {
  FxForm,
  FxFormItem,
  FxInput,
  FxSelect,
  FxOption,
  FxInputNumber,
  FxSwitch,
  FxCheckbox,
  FxCheckboxGroup,
  FxRadio,
  FxRadioGroup,
  FxBtn,
} from "@fx/components"

const form = reactive({
  name: "",
  region: "",
  count: 0,
  delivery: false,
  type: [] as string[],
  resource: "",
  desc: "",
})

function onSubmit() {
  console.log("submit!", form)
}
</script>

表单校验

配置 rules 后，控件在 blur/change 触发时自动校验；点击「立即创建」会执行全量校验。required、min/max、type: array、type: email 等内置规则覆盖常见场景。

<template>
  <FxForm
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="88px"
    style="max-width: 600px"
  >
    <FxFormItem label="活动名称" prop="name">
      <FxInput v-model="form.name" placeholder="请输入活动名称" />
    </FxFormItem>
    <FxFormItem label="活动区域" prop="region">
      <FxSelect v-model="form.region" placeholder="请选择活动区域">
        <FxOption label="区域一" value="shanghai" />
        <FxOption label="区域二" value="beijing" />
      </FxSelect>
    </FxFormItem>
    <FxFormItem label="活动数量" prop="count">
      <FxInputNumber v-model="form.count" :min="0" :max="100" />
    </FxFormItem>
    <FxFormItem label="即时配送" prop="delivery">
      <FxSwitch v-model="form.delivery" />
    </FxFormItem>
    <FxFormItem label="活动类型" prop="type">
      <FxCheckboxGroup v-model="form.type">
        <FxCheckbox value="online" name="type">线上活动</FxCheckbox>
        <FxCheckbox value="promotion" name="type">促销活动</FxCheckbox>
        <FxCheckbox value="offline" name="type">线下活动</FxCheckbox>
      </FxCheckboxGroup>
    </FxFormItem>
    <FxFormItem label="资源" prop="resource">
      <FxRadioGroup v-model="form.resource">
        <FxRadio value="sponsor">赞助</FxRadio>
        <FxRadio value="venue">场地</FxRadio>
      </FxRadioGroup>
    </FxFormItem>
    <FxFormItem label="活动形式" prop="desc">
      <FxInput
        v-model="form.desc"
        type="textarea"
        placeholder="请输入活动形式"
      />
    </FxFormItem>
    <FxFormItem>
      <FxBtn type="primary" @click="onSubmit">立即创建</FxBtn>
      <FxBtn style="margin-left: 8px" @click="onReset">重置</FxBtn>
    </FxFormItem>
  </FxForm>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import {
  FxForm,
  FxFormItem,
  FxInput,
  FxSelect,
  FxOption,
  FxInputNumber,
  FxSwitch,
  FxCheckbox,
  FxCheckboxGroup,
  FxRadio,
  FxRadioGroup,
  FxBtn,
  fxMsg,
} from "@fx/components"
import type { FxFormInstance, FormRules } from "@fx/components"

const formRef = ref<FxFormInstance>()

const form = reactive({
  name: "Hello",
  region: "",
  count: 0,
  delivery: false,
  type: [] as string[],
  resource: "",
  desc: "",
})

const rules: FormRules = {
  name: [
    { required: true, message: "请输入活动名称", trigger: "blur" },
    { min: 3, max: 5, message: "长度需在 3 到 5 个字符", trigger: "blur" },
  ],
  region: [{ required: true, message: "请选择活动区域", trigger: "change" }],
  count: [{ required: true, message: "请输入活动数量", trigger: "blur" }],
  type: [
    {
      type: "array",
      required: true,
      message: "请至少选择一种活动类型",
      trigger: "change",
    },
  ],
  resource: [{ required: true, message: "请选择资源", trigger: "change" }],
  desc: [{ required: true, message: "请输入活动形式", trigger: "blur" }],
}

async function onSubmit() {
  try {
    await formRef.value?.validate()
    fxMsg.success("校验通过")
  } catch (fields) {
    console.log("error submit!", fields)
  }
}

function onReset() {
  formRef.value?.resetFields()
}
</script>

自定义校验

当内置规则无法满足时，通过 validator(rule, value, callback) 自定义校验逻辑。本示例演示密码二次确认联动校验（输入新密码后自动触发确认项重校）和异步校验（年龄校验延迟 1s），并启用 status-icon 展示校验结果图标。

<template>
  <FxForm
    ref="formRef"
    :model="form"
    :rules="rules"
    status-icon
    label-width="88px"
    style="max-width: 600px"
  >
    <FxFormItem label="密码" prop="pass">
      <FxInput v-model="form.pass" type="password" autocomplete="off" />
    </FxFormItem>
    <FxFormItem label="确认密码" prop="checkPass">
      <FxInput v-model="form.checkPass" type="password" autocomplete="off" />
    </FxFormItem>
    <FxFormItem label="年龄" prop="age">
      <FxInput v-model.number="form.age" />
    </FxFormItem>
    <FxFormItem>
      <FxBtn type="primary" @click="onSubmit">提交</FxBtn>
      <FxBtn style="margin-left: 8px" @click="onReset">重置</FxBtn>
    </FxFormItem>
  </FxForm>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import { FxForm, FxFormItem, FxInput, FxBtn } from "@fx/components"
import type { FxFormInstance, FormRules } from "@fx/components"

const formRef = ref<FxFormInstance>()
const form = reactive({
  pass: "",
  checkPass: "",
  age: "" as string | number,
})

const checkAge = (_rule: unknown, value: unknown, callback: (e?: Error) => void) => {
  if (!value) {
    return callback(new Error("请输入年龄"))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error("请输入数字"))
    } else if (value < 18) {
      callback(new Error("年龄必须大于 18 岁"))
    } else {
      callback()
    }
  }, 1000)
}

const validatePass = (_rule: unknown, value: unknown, callback: (e?: Error) => void) => {
  if (value === "") {
    callback(new Error("请输入密码"))
  } else {
    if (form.checkPass !== "") {
      formRef.value?.validateField("checkPass")
    }
    callback()
  }
}

const validatePass2 = (_rule: unknown, value: unknown, callback: (e?: Error) => void) => {
  if (value === "") {
    callback(new Error("请再次输入密码"))
  } else if (value !== form.pass) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}

const rules: FormRules = {
  pass: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
  age: [{ validator: checkAge, trigger: "blur" }],
}

async function onSubmit() {
  try {
    await formRef.value?.validate()
    console.log("submit!")
  } catch {
    console.log("error submit!")
  }
}

function onReset() {
  formRef.value?.resetFields()
}
</script>

行内表单

设置 inline 后，所有 FxFormItem 横向排列，适合查询栏、过滤条等紧凑场景。

<template>
  <FxForm :inline="true" :model="form" class="demo-form-inline">
    <FxFormItem label="审批人">
      <FxInput v-model="form.user" placeholder="审批人" clearable />
    </FxFormItem>
    <FxFormItem label="活动区域">
      <FxSelect v-model="form.region" placeholder="活动区域" clearable>
        <FxOption label="区域一" value="shanghai" />
        <FxOption label="区域二" value="beijing" />
      </FxSelect>
    </FxFormItem>
    <FxFormItem label="优先级">
      <FxSlider v-model="form.priority" style="width: 160px" />
    </FxFormItem>
    <FxFormItem>
      <FxBtn type="primary" @click="onQuery">查询</FxBtn>
    </FxFormItem>
  </FxForm>
</template>

<script setup lang="ts">
import { reactive } from "vue"
import { FxForm, FxFormItem, FxInput, FxSelect, FxOption, FxSlider, FxBtn } from "@fx/components"

const form = reactive({
  user: "",
  region: "",
  priority: 0,
})

function onQuery() {
  console.log("query!", form)
}
</script>

<style scoped>
.demo-form-inline :deep(.fx-input),
.demo-form-inline :deep(.fx-select) {
  width: 200px;
}
</style>

表单尺寸

size 透传到表单内所有接入 useFormItem 的控件（FxInput/FxSelect/FxInputNumber/FxCheckbox/FxRadio 等），统一切换 large/default/small；label-position 控制 label 位置。

<template>
  <div class="controls">
    <FxRadioGroup v-model="size" aria-label="尺寸控制">
      <FxRadioBtn value="large">large</FxRadioBtn>
      <FxRadioBtn value="default">default</FxRadioBtn>
      <FxRadioBtn value="small">small</FxRadioBtn>
    </FxRadioGroup>
    <FxRadioGroup v-model="labelPosition" aria-label="label 位置">
      <FxRadioBtn value="left">left</FxRadioBtn>
      <FxRadioBtn value="right">right</FxRadioBtn>
      <FxRadioBtn value="top">top</FxRadioBtn>
    </FxRadioGroup>
  </div>
  <FxForm
    :model="form"
    label-width="88px"
    :label-position="labelPosition"
    :size="size"
    style="max-width: 600px; margin-top: 16px"
  >
    <FxFormItem label="活动名称">
      <FxInput v-model="form.name" />
    </FxFormItem>
    <FxFormItem label="活动区域">
      <FxSelect v-model="form.region" placeholder="请选择活动区域">
        <FxOption label="区域一" value="shanghai" />
        <FxOption label="区域二" value="beijing" />
      </FxSelect>
    </FxFormItem>
    <FxFormItem label="数量">
      <FxInputNumber v-model="form.count" :min="0" />
    </FxFormItem>
    <FxFormItem label="活动类型">
      <FxCheckboxGroup v-model="form.type">
        <FxCheckboxBtn value="online" name="type">线上活动</FxCheckboxBtn>
        <FxCheckboxBtn value="promotion" name="type">促销活动</FxCheckboxBtn>
      </FxCheckboxGroup>
    </FxFormItem>
    <FxFormItem label="资源">
      <FxRadioGroup v-model="form.resource">
        <FxRadio value="sponsor" border>赞助</FxRadio>
        <FxRadio value="venue" border>场地</FxRadio>
      </FxRadioGroup>
    </FxFormItem>
    <FxFormItem>
      <FxBtn type="primary" @click="onSubmit">立即创建</FxBtn>
      <FxBtn>取消</FxBtn>
    </FxFormItem>
  </FxForm>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import {
  FxForm,
  FxFormItem,
  FxInput,
  FxSelect,
  FxOption,
  FxInputNumber,
  FxCheckbox,
  FxCheckboxGroup,
  FxCheckboxBtn,
  FxRadio,
  FxRadioGroup,
  FxRadioBtn,
  FxBtn,
} from "@fx/components"

const size = ref<"large" | "default" | "small">("default")
const labelPosition = ref<"left" | "right" | "top">("right")
const form = reactive({
  name: "",
  region: "",
  count: 0,
  type: [] as string[],
  resource: "",
})

function onSubmit() {
  console.log("submit!", form)
}
</script>

<style scoped>
.controls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
</style>

数字类型校验

v-model.number 配合 type: 'number' 规则，可校验输入是否为数字；规则写在 FxFormItem 的 :rules 上可针对单项配置。

<template>
  <FxForm
    ref="formRef"
    :model="form"
    label-width="88px"
    style="max-width: 600px"
  >
    <FxFormItem
      label="年龄"
      prop="age"
      :rules="[
        { required: true, message: '年龄为必填项' },
        { type: 'number', message: '年龄必须为数字' },
      ]"
    >
      <FxInput v-model.number="form.age" type="text" autocomplete="off" />
    </FxFormItem>
    <FxFormItem>
      <FxBtn type="primary" @click="onSubmit">提交</FxBtn>
      <FxBtn style="margin-left: 8px" @click="onReset">重置</FxBtn>
    </FxFormItem>
  </FxForm>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import { FxForm, FxFormItem, FxInput, FxBtn } from "@fx/components"
import type { FxFormInstance } from "@fx/components"

const formRef = ref<FxFormInstance>()
const form = reactive({
  age: "" as string | number,
})

async function onSubmit() {
  try {
    await formRef.value?.validate()
    console.log("submit!")
  } catch {
    console.log("error submit!")
  }
}

function onReset() {
  formRef.value?.resetFields()
}
</script>

无障碍

FxFormItem 的 label 会自动关联到内部第一个控件；当一项内包含多个输入时（如姓名 + 姓氏），需在每个输入上单独设置 aria-label，placeholder 不能替代。

<template>
  <FxForm label-position="left" label-width="auto" style="max-width: 600px">
    <FxAlert type="info" :closable="false" show-icon style="margin-bottom: 12px">
      <p>"姓名" label 自动关联到对应输入框：</p>
    </FxAlert>
    <FxFormItem label="姓名">
      <FxInput v-model="form.fullName" />
    </FxFormItem>

    <FxAlert type="info" :closable="false" show-icon style="margin: 16px 0 12px">
      <p>
        "个人信息" 作为一组输入的 label，每个输入仍需单独通过 aria-label 指定可读名称（placeholder 不能替代）。
      </p>
    </FxAlert>
    <FxFormItem label="个人信息">
      <div class="row">
        <FxInput
          v-model="form.firstName"
          aria-label="名"
          placeholder="名"
          class="col"
        />
        <FxInput
          v-model="form.lastName"
          aria-label="姓"
          placeholder="姓"
          class="col"
        />
      </div>
    </FxFormItem>
  </FxForm>
</template>

<script setup lang="ts">
import { reactive } from "vue"
import { FxForm, FxFormItem, FxInput, FxAlert } from "@fx/components"

const form = reactive({
  fullName: "",
  firstName: "",
  lastName: "",
})
</script>

<style scoped>
.row {
  display: flex;
  gap: 16px;
  width: 100%;
}
.col {
  flex: 1;
}
</style>

对齐方式

FxForm 与 FxFormItem 均支持 label-position，可分别控制「表单整体对齐」与「单项对齐」，单项设置优先于表单设置。

<template>
  <FxForm
    :label-position="labelPosition"
    label-width="88px"
    :model="form"
    style="max-width: 600px"
  >
    <FxFormItem label="表单对齐" label-position="right">
      <FxRadioGroup v-model="labelPosition" aria-label="表单 label 位置">
        <FxRadioBtn value="left">left</FxRadioBtn>
        <FxRadioBtn value="right">right</FxRadioBtn>
        <FxRadioBtn value="top">top</FxRadioBtn>
      </FxRadioGroup>
    </FxFormItem>
    <FxFormItem label="表单项对齐" label-position="right">
      <FxRadioGroup v-model="itemLabelPosition" aria-label="表单项 label 位置">
        <FxRadioBtn value="">empty</FxRadioBtn>
        <FxRadioBtn value="left">left</FxRadioBtn>
        <FxRadioBtn value="right">right</FxRadioBtn>
        <FxRadioBtn value="top">top</FxRadioBtn>
      </FxRadioGroup>
    </FxFormItem>
    <FxFormItem label="名称" :label-position="itemLabelPosition || undefined">
      <FxInput v-model="form.name" />
    </FxFormItem>
    <FxFormItem label="活动区域" :label-position="itemLabelPosition || undefined">
      <FxInput v-model="form.region" />
    </FxFormItem>
    <FxFormItem label="活动形式" :label-position="itemLabelPosition || undefined">
      <FxInput v-model="form.type" />
    </FxFormItem>
  </FxForm>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import { FxForm, FxFormItem, FxInput, FxRadioGroup, FxRadioBtn } from "@fx/components"

const labelPosition = ref<"left" | "right" | "top">("right")
const itemLabelPosition = ref<"" | "left" | "right" | "top">("")
const form = reactive({
  name: "",
  region: "",
  type: "",
})
</script>

动态增减表单项

通过 v-for 渲染动态字段，:prop 用 domains.${index}.value 路径形式指向 model 的嵌套字段，:rules 在项上单独配置。新增/删除字段后表单值与校验状态自动同步。

<template>
  <FxForm
    ref="formRef"
    :model="form"
    label-width="88px"
    style="max-width: 600px"
  >
    <FxFormItem
      prop="email"
      label="邮箱"
      :rules="[
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
      ]"
    >
      <FxInput v-model="form.email" />
    </FxFormItem>
    <FxFormItem
      v-for="(domain, index) in form.domains"
      :key="domain.key"
      :label="`域名 ${index}`"
      :prop="`domains.${index}.value`"
      :rules="{
        required: true,
        message: '域名不能为空',
        trigger: 'blur',
      }"
    >
      <div class="row">
        <FxInput v-model="domain.value" class="domain-input" />
        <FxBtn @click.prevent="removeDomain(domain)">删除</FxBtn>
      </div>
    </FxFormItem>
    <FxFormItem>
      <FxBtn type="primary" @click="onSubmit">提交</FxBtn>
      <FxBtn style="margin-left: 8px" @click="addDomain">新增域名</FxBtn>
      <FxBtn style="margin-left: 8px" @click="onReset">重置</FxBtn>
    </FxFormItem>
  </FxForm>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import { FxForm, FxFormItem, FxInput, FxBtn } from "@fx/components"
import type { FxFormInstance } from "@fx/components"

interface DomainItem {
  key: number
  value: string
}

const formRef = ref<FxFormInstance>()
const form = reactive<{ domains: DomainItem[]; email: string }>({
  domains: [{ key: 1, value: "" }],
  email: "",
})

function removeDomain(item: DomainItem) {
  const index = form.domains.indexOf(item)
  if (index !== -1) {
    form.domains.splice(index, 1)
  }
}

function addDomain() {
  form.domains.push({
    key: Date.now(),
    value: "",
  })
}

async function onSubmit() {
  try {
    await formRef.value?.validate()
    console.log("submit!")
  } catch {
    console.log("error submit!")
  }
}

function onReset() {
  formRef.value?.resetFields()
}
</script>

<style scoped>
.row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.domain-input {
  flex: 1;
}
</style>

局部引入

import { FxForm, FxFormItem } from "@fx/components"
import type {
  FxFormInstance,
  FxFormItemInstance,
  FormRules,
  FormItemRule,
} from "@fx/components"

FxForm API

Attributes

名称	说明	类型	默认值
model	表单数据对象	Record<string, any>	—
rules	表单校验规则	FormRules	—
label-position	label 位置	'left' | 'right' | 'top'	right
label-width	label 宽度（如 '80px'，支持 'auto'）	string | number	—
label-suffix	label 后缀	string	—
require-asterisk-position	必填星号位置	'left' | 'right'	left
hide-required-asterisk	是否隐藏必填星号	boolean	false
inline	是否行内表单	boolean	false
inline-message	是否行内展示校验信息	boolean	false
status-icon	是否展示校验结果图标	boolean	false
show-message	是否展示错误信息	boolean	true
validate-on-rule-change	rules 变化是否触发校验	boolean	true
scroll-to-error	校验失败是否滚动到首个错误项	boolean	false
scroll-into-view-options	滚动配置	ScrollIntoViewOptions | boolean	true
size	表单内组件尺寸	'large' | 'default' | 'small'	—
disabled	是否禁用表单内所有组件	boolean	false

Events

名称	说明	回调参数
validate	任一字段校验完成时触发	(prop, isValid, message)

Methods（ref）

名称	说明
validate	全量校验，返回 Promise<void>，失败时 reject
validate-field	校验指定字段 (props?, callback?)
reset-fields	重置表单（恢复初始值 + 清空校验）
clear-validate	清空校验状态 (props?)
scroll-to-field	滚动到指定字段 (prop)

Slots

名称	说明
default	表单项内容（FxFormItem）

FxFormItem API

Attributes

名称	说明	类型	默认值
prop	model 的字段键（支持路径数组，用于 validate/resetField）	string | string[]	—
label	label 文本	string	—
label-width	label 宽度（覆盖 form）	string | number	—
label-position	label 位置（覆盖 form）	'left' | 'right' | 'top'	—
required	是否必填（省略则由规则决定）	boolean	—
rules	该项校验规则	FormItemRule | FormItemRule[]	—
error	字段错误信息（设置后立即进入 error 态）	string	—
validate-status	校验状态	'' | 'error' | 'validating' | 'success'	—
for	等价原生 label 的 for	string	—
inline-message	是否行内展示校验信息	boolean	—
show-message	是否展示错误信息	boolean	true
size	该项内组件尺寸	'large' | 'default' | 'small'	—

Slots

名称	说明	作用域
default	字段控件	—
label	自定义 label	{ label }
error	自定义错误内容	{ error }

Methods（ref）

名称	说明
validate	校验该项 (trigger, callback?)
reset-field	重置该项
clear-validate	清空该项校验状态

校验规则

rules 为配置式（async-validator），每个字段是规则数组：

const rules: FormRules = {
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 5, message: "长度 2-5 个字符", trigger: "blur" },
  ],
  age: [
    { required: true, message: "请输入年龄", trigger: "blur" },
    { type: "number", message: "必须为数字", trigger: "blur" },
  ],
}

常用规则字段：required / min / max / len / type / pattern / validator(自定义) / trigger('blur'|'change') / message。

实现说明

• 校验引擎：async-validator，rules 配置式；FxFormItem 内用 Schema 实例校验，支持 blur/change 触发过滤与全量 validate。
• 字段接入：表单控件（FxInput/FxSelect/FxCheckbox/FxRadio/FxSwitch/FxSlider/FxInputNumber）通过 useFormItem 接入，blur/change 时上报校验，并透传 size/disabled、关联 label for。
• 嵌套字段：prop 支持字符串路径数组（如 ['user', 'name']），rules 按嵌套结构提供。
• 样式：走 @fx/styles token（--color-danger/--color-text-*/--fw-*/--radius-*），fx-form/fx-form-item BEM，亮暗自动跟随。
• 校验图标：开启 status-icon 后，校验图标由受控控件（FxInput/FxSelect）在自身 suffix 内渲染（类名 fx-input__validate-icon）；form-item 通过 feedback 态下发显隐信号，is-error 态下钻使受控控件 wrapper 边框变红。图标走 @fx-core/icon：成功 ep:circle-check、失败 ep:circle-close、校验中 ep:loading。