A2InfoField

信息展示字段组件，支持图标+标签+值布局，值支持多种样式变体。

属性

属性	类型	默认值	说明
label	string	-	标签文字
modelValue	string	-	显示的值
icon	string	-	图标名称（Element Plus 图标）或图片 URL
variant	`tag	text	quote`
size	`large	default`	default
bgColor	string	-	整行背景色（设置后自动贴边显示）
value	{ path: string, default?: any }	-	数据绑定路径与默认值

变体说明

变体	效果
text	普通文本样式
tag	蓝色标签样式（背景 #EFF4FF，文字 #2260FA）
quote	灰色引用块样式（背景 #F5F7FA，圆角 8px）

扁平格式默认值

在扁平格式中，可以通过 value.default 设置初始显示值：

{
  "id": "infoField",
  "component": "InfoField",
  "label": "系统名称",
  "value": { "path": "/form/system", "default": "国内GOMS" }
}

带默认值的InfoField

[ { "id": "root", "component": "Card", "child": "infoField", "width": "xs" }, { "id": "infoField", "component": "InfoField", "label": "系统名称", "value": { "path": "/form/system", "default": "国内GOMS" } } ]

无内容

基础示例

基础信息字段

{ "id": "field1", "type": "a2-info-field", "props": { "label": "系统名称", "modelValue": "国内GOMS" } }

无内容

Tag 变体示例

标签样式

{ "id": "tagField", "type": "a2-info-field", "props": { "label": "模块名称", "modelValue": "订单管理", "variant": "tag" } }

无内容

Quote 变体示例

引用块样式

{ "id": "quoteField", "type": "a2-info-field", "props": { "label": "提问内容", "modelValue": "这是一个问题描述内容...", "variant": "quote" } }

无内容

带图标示例

带图标的信息字段

{ "id": "iconField", "type": "a2-info-field", "props": { "label": "系统名称", "modelValue": "国内GOMS", "icon": "Monitor" } }

无内容

JSON Schema

{
  "id": "infoFieldId",
  "type": "a2-info-field",
  "props": {
    "label": "标签名称",
    "modelValue": "显示值",
    "variant": "tag",
    "icon": "Monitor",
    "size": "default",
    "bgColor": "#F8F8FB"
  }
}