Form Field 表单字段
基于 BrConfigProvider 实现全局主题配置，支持多控件集成、状态联动、布局自定义的企业级表单字段组件，可无缝集成 BrForm 和 BrTable 内联表单。
组件特性
- 🎨 主题配置：通过
BrConfigProvider自动继承全局主题设置（颜色、圆角、尺寸等）。 - 🔄 状态联动：根据字段状态（如错误、成功）自动联动标签、边框和提示文本的颜色。
- 📐 灵活布局：支持标签顶部、左侧或右侧对齐，并可自定义标签宽度。
- 🛠️ 高度定制：可轻松使用 TailwindCSS 或传入自定义类名覆盖默认样式。
基础用法
展示一个包含标签、控件和描述的基础表单字段。
This is your public display name.
Example
错误状态
展示在校验失败时，标签、边框和提示文本的联动变色效果。
Please enter a valid email address.
Example
自定义布局
支持标签在左侧或右侧显示，以及定制标签宽度。
Receive updates via email.
Example
状态联动
展示禁用 (disabled)、只读 (readonly) 和加载中 (loading) 状态。标签和描述文本会自动调整样式以匹配当前状态。
This field and its label are disabled.
This field cannot be modified.
Verifying availability...
Example
API 说明
BrFormField
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
name | string | - | 字段名称，用于表单校验绑定 |
label | string | - | 标签文本 |
description | string | - | 描述信息 |
error | string | - | 错误信息，设置后会自动进入错误状态 |
state | 'default' | 'error' | 'success' | 'warning' | 'default' | 自定义状态 |
disabled | boolean | false | 是否禁用 |
readonly | boolean | false | 是否只读 |
required | boolean | false | 是否必填（显示红星） |
hideRequiredAsterisk | boolean | false | 是否隐藏必填星号 |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | 尺寸，继承自 ConfigProvider |
labelPosition | 'top' | 'left' | 'right' | 'top' | 标签位置 |
labelWidth | string | number | - | 标签宽度（仅左/右位置生效） |
loading | boolean | false | 是否显示加载态占位 |
isolated | boolean | false | 是否启用 Shadow DOM 样式隔离 |
zIndex | number | - | 层级，默认由 FormFieldManager 自动分配递增 |
BrFormFieldLabel / BrFormFieldDescription / BrFormFieldMessage
通用属性：支持传入 class 进行样式覆盖，自动从 formFieldContext 注入状态。
FormFieldManager (工具类)
管理全局表单字段层级的单例工具。
ts
import { formFieldManager } from '@breeze-ui/vue/form-field'
// 获取下一个自增的 z-index
const zIndex = formFieldManager.nextZIndex()
// 重置 z-index 基数
formFieldManager.resetZIndex()